Add port for LiveReload

[ivancunha]

I'm in the exact situation as this case: https://magento.stackexchange.com/q/306011
Grunt is working... But LiveReload not so much.

So I need to open the port: 35729

In this issue that should have been a discussion: #430
The suggestion is to add "EXPOSE 35729" to the dockerfile.

I need further explanation for this please.

Cheers

[markshust]

@ivancunha can you confirm this works? I'd gladly take in a PR that does this!

[asannikov]

it should be smth like that:

phpfpm:
    image: markoshust/magento-php:8.1-fpm-1
    ports:
      - "35729:35729"

But you have to install all related node dependencies before using livereload.

bin/root npm install -g grunt-cli 
bin/root npm install -g livereload

after that to run bin/cli livereload and stop it. Then you can run bin/grunt watch and it should work. Just check http://your.domain:35729/. Take into account that it works with HTTP here. And probably it brings some problem here. For example, the page is not reloaded on any change. It's the issue that I'm still struggling with.

@markshust maybe you know how to resolve it?
https://your.domain:35729/ does not work and if i include the script into page content http://website.test:35729/livereload.js?snipver=1, then i gen an error:
Mixed Content: The page at 'https://domain.test/' was loaded over HTTPS, but requested an insecure script 'http://domain.test:35729/livereload.js?snipver=1'. This request has been blocked; the content must be served over HTTPS.
How did you conifgure livereload on your host?

[markshust]

You need to create a module which adds the URL to the CSP whitelist:

etc/csp_whitelist.xml

<?xml version="1.0" encoding="UTF-8"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="connect-src">
            <values>
                <value id="livereload" type="host">ws://127.0.0.1:35729</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

I did this and got the "content blocked" errors to go away. However it's still not connecting to port 35729.

UPDATE: updated the value of the csp above. I did get all console errors to go away and when I click the LiveReload browser icon, it now says 'connected'.

[markshust]

I GOT THIS WORKING! It was very confusing & complex 😅

I'll push out an update shortly that contains support for livereload. Thanks for your patience.

[markshust]

Here's a review of some updates I got to get this working: https://twitter.com/MarkShust/status/1569685024030748672

I wound up ditching the CSP policy and odd port directives (ex. :35729), and instead set up Nginx proxies so we don't need to deal with any of that stuff.

[markshust]

Also, by setting up the proxies you don't need to deal with port numbers or anything. Simply exposing port 35729 within the PHP Docker image is enough, as that opens the port to local services, such as Nginx. It doesn't need to be publicly exposed at that point because you are never using the port number to connect to it.

[markshust]

LiveReload has finally been fully implemented. Full documentation at https://github.com/markshust/docker-magento#grunt--livereload-for-frontend-development

Just ran through this documentation on a fresh site install, and went really smooth! 👍