Support Live Reload routing natively on Magento 2 environment

[davidalger]

Magento 2 can be rather simply configured to serve the Live Reload script by including the following bit in the env.php file and running bin/magento app:config:import:

    'system' => [
        'default' => [
            'design' => [
                'footer' => [
                    'absolute_footer' => '<script src="/livereload.js?port=443"></script>'
                ]
            ]
        ]
    ]

Routing requests to this has previously required using per-project configuration in .warden/warden-env.yml to label the php-fpm container as required to serve the Live Reload JS file and process Web Socket requests when grunt watch is running.

In the upcoming Warden 0.2.0 release Live Reload should require nothing more than adding the script tag to the env.php file or including it via design configuration in the admin.

Documentation on how to leverage Live Reload

Please see the corresponding docs page: https://docs.warden.dev/configuration/livereload.html

[zaximus84]

I encountered a JS issue today that turned out to be the result of the script tag being added for livereload.js. The browser wasn't properly parsing the self-closing tag, so it saw the following script tag's content as being inside of the livereload.js tag.

It was fixed by replacing the self-closing tag with a proper closing tag:
document.write("<script src='/livereload.js?port=443'></script>");

[davidalger]

@zaximus84 Thanks for the note. That is likely why @erikhansen encountered an issue and suggested a change which is now in the template and docs page on the subject:

• https://docs.warden.dev/configuration/livereload.html
• https://github.com/davidalger/warden-env-magento2/blob/develop/webroot/app/etc/env.php.init.php#L23-L25

It would be good to reference those if encountering issues in the future. I'll update the above description to correct the bad JS bit and reference the docs page as well. Cheers!