hot reloading for twig files not working?

[lakhman]

I just tried a fresh install of this, when I update the base.html.twig or any other twig files, it doesn't update, is this possible?

So when I save a twig file, it reloads the current page (not a hot reload, just like live reload).

Does it require any specific configuration?

[mariusbalcytis]

No, sadly it does not work this way. maba:webpack:dev-server command scans twig files in configured directories and searches for webpack_asset function usages. It builds list of entry points and passes that to webpack configuration file. Then it starts webpack-dev-server. It sleeps for a second and repeats the process. If entry points are changed, it restarts the process. Hot reloading is enabled only in the webpack-dev-server itself, as it generates javascript file that does this hot-reloading. It is unaware of changes inside twig files.

So, we have some different situations:

• changed config file. For example, new bundle added in AppKernel. Or new alias via config.yml file. This is totally ignored by maba:webpack:dev-server as PHP command is already loaded with previous configuration. You must manually restart PHP command to see the changes;
• twig template changed. For example, text in it was changed, some tags added etc. This is not a subject to hot-reload, you must refresh page to see the changes;
• twig template changed so that new asset is loaded via webpack_asset function. This initiates reloading of configuration file and restarting of webpack-dev-server process. This can take some time. While assets are compiling, you'll see 500 error if you reload the page. After assets are compiled, you must still refresh the page manually;
• any asset itself is changed (js, css files). As this is handled by webpack-dev-server, this is a subject to hot-reload. Keep in mind that only some javascript files are compatible with hot-reload. For example, if you define global variable in your javascript file, hot-reload will only change the variable itself. All the references that were made earlier will not be automatically changed. Still, hot-reload should always work well with css files.

[lakhman]

Great, thanks for confirming, I had a feeling it wouldn't work like this, but was in 2 minds as the docs state:

Watches twig templates for changes, updates entry points and restarts webpack-dev-server if webpack configuration changes.

[jrysig]

Based on How to watch twig files with Webpack and Symfony? I did try proposed solution using watchFile-webpack-plugin. When I change twig file, webpack compilation is triggered and browser is notified. Unfortunately browser is not reloaded because of [WDS] Nothing changed..

Navigated to http://127.0.0.1:8000/
client:37 [WDS] App updated. Recompiling...
client:37 [WDS] Nothing changed.
client:37 [WDS] App updated. Recompiling...
client:37 [WDS] Nothing changed.
client:37 [WDS] App updated. Recompiling...

Is there any chance to force browser reload in this case?

[mariusbalcytis]

What exactly do you change? Do you add new entry point, change existing one, remove one?

Could you make separate issue for this if needed?

I don't think that watchFile-webpack-plugin would be a good option with this bundle in general, as it would watch all twig files for all assets, as I imagine. Generally there could be many entry points and many twig templates, so changing one of them should not require regeneration of all entry points. Furthermore, bundle itself must process twig files to update webpack configuration as needed.