Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update CLI command and reference #1659

Merged
merged 3 commits into from
Jan 23, 2025
Merged

Update CLI command and reference #1659

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4346e44
Update CLI command and reference
Isengo1989 Jan 20, 2025
fd12a04
Fix shortcut
Isengo1989 Jan 20, 2025
769be06
Fix markdown
Isengo1989 Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 44 additions & 14 deletions resources/tooling/cli/using-watchers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,39 @@

---

# Hot Module Reloading
# Hot Module Replacement

## Watchers
## Building JS and CSS

When developing with Shopware, you will probably notice that changes in JavaScript require commands to build the Administration or Storefront, depending on your change using the following commands:
When developing with Shopware, you will probably notice that changes in JavaScript require commands to build the Administration or
Storefront, depending on your change using the following commands:

<Tabs>
<Tab title="Administration (Composer)">
<Tab title="Build administration (Source code)">

```bash
composer run build:js:admin
```

</Tab>

<Tab title="Administration (Shell)">
<Tab title="Build administration (Production template)">

```bash
./bin/build-administration.sh
```

</Tab>

<Tab title="Storefront (Composer)">
<Tab title="Build storefront (Source code)">

```bash
composer run build:js:storefront
```

</Tab>

<Tab title="Storefront (Shell)">
<Tab title="Build storefront (Production template)">

```bash
./bin/build-storefront.sh
Expand All @@ -45,44 +46,73 @@
</Tab>
</Tabs>

This building process is always time-consuming. Alternatively, to speed up the process, Shopware's Production template offers composer commands to enable Hot Module Reloading/watchers to automatically reload and preview your changes.
## Watchers

This building process is always time-consuming. Alternatively, to speed up the process.
Shopware's [Production template](https://github.com/shopware/production) and [Source code](https://github.com/shopware/shopware) offers
commands to enable Hot Module Replacement (HMR) to automatically reload and preview your changes.

::: info
This procedure doesn't replace the final build process when you finish developing your feature.
:::

To enable Hot Module Reloading, use the following composer commands:
To enable Hot Module Replacement, use the following composer commands in the Shopware source code:

<Tabs>
<Tab title="Administration">
<Tab title="Admin watcher">

```bash
composer run watch:admin
```

</Tab>

<Tab title="Storefront">
<Tab title="Storefront watcher">

```bash
composer run watch:storefront
```

</Tab>

</Tabs>

To enable Hot Module Reloading, use the following shell scripts in the Shopware Production template:

<Tabs>

<Tab title="Admin watcher">

```bash
./bin/watch-administration.sh
```

</Tab>

<Tab title="Storefront watcher">

```bash
./bin/watch-storefront.sh
```

</Tab>
</Tabs>

### Environment variables

Using environment variables can also affect Shopware and, therefore, its watchers. Like in Unix, prefixing command calls with a variable set will run the command with the respective change. The following example will run the storefront watcher in production mode:
Using environment variables can also affect Shopware and, therefore, its watchers. Like in Unix, prefixing command calls with a variable set
will run the command with the respective change. The following example will run the storefront watcher in production mode:

```bash
APP_ENV=prod composer run watch:storefront
```

#### APP_ENV

When using `APP_ENV=dev`, Shopware runs in development mode and provides features for debugging - for example, the Symfony toolbar in the Storefront, while its counterpart `APP_ENV=prod` enables production mode and therefore disables any such tools.
When using `APP_ENV=dev`, Shopware runs in development mode and provides features for debugging - for example, the Symfony toolbar in the
Storefront, while its counterpart `APP_ENV=prod` enables production mode and therefore disables any such tools.

#### IPV4FIRST

Starting with NodeJS v17.0.0, it prefers IPv6 over IPv4. However, in some setups, IPv6 may cause problems when using watchers. In such cases, setting `IPV4FIRST=1` reverts this behavior.
Starting with NodeJS v17.0.0, it prefers IPv6 over IPv4. However, in some setups, IPv6 may cause problems when using watchers. In such

Check warning on line 117 in resources/tooling/cli/using-watchers.md

View workflow job for this annotation

GitHub Actions / LanguageTool

[LanguageTool] resources/tooling/cli/using-watchers.md#L117 

The official spelling of this programming framework is “Node.js”. (NODE_JS[3])
Suggestions: `Node.js`
Rule: https://community.languagetool.org/rule/show/NODE_JS?lang=en-US&subId=3
Category: COMPOUNDING
Raw output 
resources/tooling/cli/using-watchers.md:117:14: The official spelling of this programming framework is “Node.js”. (NODE_JS[3])
 Suggestions: `Node.js`
 Rule: https://community.languagetool.org/rule/show/NODE_JS?lang=en-US&subId=3
 Category: COMPOUNDING
cases, setting `IPV4FIRST=1` reverts this behavior.
Loading