LiveReload Setup¶
LiveReload routing is currently supported on the magento2
, pwa-studio
and shopware
environment types. Other
environment types may utilize LiveReload via per-project compose configurations to set up the routing for LiveReload JS
and WebSocket endpoints.
Configuration for Magento 2¶
Magento 2 bundles an example grunt based server-side compilation workflow which includes LiveReload, and it works within the Reward shell environment. In order to use this:
Rename or copy
Gruntfile.js.sample
file toGruntfile.js
in your project root.Rename or copy
package.json.sample
file topackage.json
in your project root.Run
npm install
to install the required NodeJS packages as defined inpackage.json
.Merge the following into your project’s
app/etc/env.php
configuration file:
<?php
return [
'system' => [
'default' => [
'design' => [
'footer' => [
'absolute_footer' => '<script defer src="/livereload.js?port=443"></script>'
]
]
]
]
];
Note
This can be accomplished via alternative means, the important part is the browser requesting /livereload.js?port=443
when running the site on your local development environment.
Run
bin/magento app:config:import
to load merged configuration into the application and flush the cachebin/magento cache:flush
.
With the above configuration in place, you’ll first enter the FPM container via reward shell
and then setup as
follows:
Clean and build the project theme using grunt:
$ grunt clean
$ grunt exec:blank
$ grunt less:blank
Thereafter, only a single command should be needed for daily development:
$ grunt watch
Note
Grunt should be used within the php-fpm container entered via reward shell
This setup will also be used to persist changes to your compiled CSS. When you run grunt watch
, a LiveReload server
will be started on ports 35729 within the php-fpm container and Traefik will take care of proxying the JavaScript tag
and WebSocket requests to this listener.
On a working setup with grunt watch
running within reward shell
you should see something like the following in the
network inspector after reloading the project in a web browser.
Configuration for Shopware¶
Storefront¶
Configure Traefik to allow serving traffic on the required additional ports and disable https redirects.
Open Reward Global Configuration (default: ~/.reward.yml
) and add the following line:
reward_traefik_bind_additional_https_ports: [ 9998, 9999 ]
reward_traefik_allow_http: true
When it’s done, restart Traefik. If you open Traefik dashboard, you should see the new ports in the entrypoints section.
reward svc down
reward svc up
Open the environment’s .env
file and add the following lines:
REWARD_HTTPS_PROXY_PORTS=9998,9999
REWARD_TRAEFIK_CUSTOM_HEADERS=hot-reload-mode=1,hot-reload-port=9999
Warning
If you want to disable hot-reload-mode ensure to remove (or comment out) the REWARD_TRAEFIK_CUSTOM_HEADERS line from the .env file.
And restart the environment.
reward env down
reward env up
Now if you start the Live Reload server, the requests will be proxied to it.
reward shell
# shopware production template
bin/build-storefront.sh
bin/watch-storefront.sh
# shopware development template
./psh.phar storefront:hot-proxy
Administration¶
On top of the storefront configuration, you have to define the additional port for the administration.
Open Reward Global Configuration (default: ~/.reward.yml
) and add the following line:
reward_traefik_bind_additional_https_ports: [ 8080 ]
# Or to enable hot-reload for both, add all 3 ports
# reward_traefik_bind_additional_https_ports: [ 9998, 9999, 8080 ]
When it’s done, restart Traefik.
reward svc down
reward svc up
You have to configure the watch-admin script to listen on 0.0.0.0
instead of localhost
and to serve requests with
different host headers. To do so, open the environment’s .env
file and add the following two line:
REWARD_HTTPS_PROXY_PORTS=8080
HOST=0.0.0.0
DANGEROUSLY_DISABLE_HOST_CHECK=true
# Or to enable hot-reload for both, add all 3 ports
# REWARD_HTTPS_PROXY_PORTS=9998,9999,8080
And restart the environment.
reward env down
reward env up
Finally, build and run the administration with the following commands:
reward shell
# shopware production template
bin/build-administration.sh
bin/watch-administration.sh
# shopware development template
./psh.phar administration:watch