LiveReload routing is currently supported on the
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.jsin your project root.
Rename or copy
package.jsonin your project root.
npm installto install the required NodeJS packages as defined in
Merge the following into your project’s
<?php return [ 'system' => [ 'default' => [ 'design' => [ 'footer' => [ 'absolute_footer' => '<script defer src="/livereload.js?port=443"></script>' ] ] ] ] ];
You can achieve this by running the following command:
$ reward shell bin/magento config:set --lock-env \ 'design/footer/absolute_footer' '<script defer src="/livereload.js?port=443"></script>'
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.
bin/magento app:config:importto load merged configuration into the application.
With the above configuration in place, you’ll first enter the FPM container via
reward shell and then setup as
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
Grunt should be used within the php-fpm container entered via
This setup will also be used to persist changes to your compiled CSS. When you run
grunt watch, a LiveReload server
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#
Shopware Hot Reload functionality requires an additional port on the same hostname.
To configure the additional port, you will have to configure Traefik.
Open Reward Global Configuration (default:
~/.reward.yml) and add the following line:
reward_traefik_bind_additional_https_ports: [ 9998 ]
When it’s done, restart Traefik.
reward svc down reward svc up
If you open Traefik dashboard, you should see the new port in the entrypoints section.
When it’s done you have to configure this additional port on the PHP container as well. Add the following line to the
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 ./psh.phar storefront:hot-proxy