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#
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
project’s .env
file:
REWARD_HTTPS_PROXY_PORTS=9998
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