I have created a Symfony full web app with the given mand symfony new app --webapp. It came with Webpack configured with webpack-encore. I can have my assets piled with npm run watch. But the browser don't reload automatically when my I make changes. I have tried webpack-dev-server following Symfony's official documentation here, but didn't work.

webpack.config.js (I just removed the ments):

const Encore = require('@symfony/webpack-encore');
 if (!Encore.isRuntimeEnvironmentConfigured()) {
        Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
    }
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel((config) => {
       config.plugins.push('@babel/plugin-proposal-class-properties');
     })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    ;
module.exports = Encore.getWebpackConfig();

package.json:

{
    "devDependencies": {
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.0.0",
        "@symfony/webpack-encore": "^1.7.0",
        "core-js": "^3.0.0",
        "regenerator-runtime": "^0.13.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

I have created a Symfony full web app with the given mand symfony new app --webapp. It came with Webpack configured with webpack-encore. I can have my assets piled with npm run watch. But the browser don't reload automatically when my I make changes. I have tried webpack-dev-server following Symfony's official documentation here, but didn't work.

webpack.config.js (I just removed the ments):

const Encore = require('@symfony/webpack-encore');
 if (!Encore.isRuntimeEnvironmentConfigured()) {
        Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
    }
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel((config) => {
       config.plugins.push('@babel/plugin-proposal-class-properties');
     })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    ;
module.exports = Encore.getWebpackConfig();

package.json:

{
    "devDependencies": {
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.0.0",
        "@symfony/webpack-encore": "^1.7.0",
        "core-js": "^3.0.0",
        "regenerator-runtime": "^0.13.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

• javascript
• php
• symfony
• webpack
• webpack-encore

2 Answers 2

You can set up live reloading with webpack-encore in a Symfony project with the help of Browsersync. Follow the below steps carefully and you will be good to go.

1. Step one:

npm i browser-sync-webpack-plugin browser-sync dotenv --save-dev

2. Edit webpack.config.js (there are ments for the lines to add):

const Encore = require('@symfony/webpack-encore');
require("dotenv").config(); // Line to add
const BrowserSyncPlugin = require("browser-sync-webpack-plugin"); // Line to add
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // Entry to add 
    .addPlugin(new BrowserSyncPlugin(
        {
            host: "localhost",
            port: 3000,
            proxy: process.env.PROXY,
            files: [
                {
                    match: ["src/*.php"],
                },
                {
                    match: ["templates/*.twig"],
                },
                {
                    match: ["assets/*.js"],
                },
                {
                    match: ["assets/*.css"],
                },
            ],
            notify: false,
        },

        {

            reload: true,
        }
    ))

;

module.exports = Encore.getWebpackConfig();

3. Add the line below inside your .env (the url should be the one you get when you run symfony serve):

# The url should be the one you get when you run symfony serve
PROXY=http://127.0.0.1:8000/

4. Open a terminal in your project root folder and run:

symfony serve

5. Open a second terminal in your project root folder and run:

npm run watch

Id remend using webpack's built-in liveReload.

You can enable it in encore with the --live-reload flag.
e.g. encore dev-server --live-reload

To run the dev-server, you would run npm run dev-server instead of npm run watch

Live reload on twig / php file changes.

If you want to reload on twig changes, you can use webpack.devServer.watchFiles.paths
See https://webpack.js/configuration/dev-server/#devserverwatchfiles

I dont have the exact syntax, but in yourwebpack.config.js file, you can

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.watchFiles = {
            paths: ['src/**/*.php', 'templates/**/*'],
        }
    })
;