I have created a Symfony full web app with the given command symfony new app --webapp
. It came with Webpack configured with webpack-encore
. I can have my assets compiled 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 comments):
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" } }
Advertisement
Answer
You can set up live reloading with webpack-encore
in a Symfony project with the help of Browsersync. Follow carefully the below steps and you will be good to go.
- Step one:
npm i browser-sync-webpack-plugin browser-sync dotenv --save-dev
- Edit
webpack.config.js
(there are comments 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();
- Add the line below inside your
.env
(the url should be the one you get when you makesymfony serve
):
# the url should be the one you get when you make symfony serve PROXY=http://127.0.0.1:8000/
- Open a terminal in your project folder and type:
symfony serve
- Open a second terminal in your project folder and type:
npm run watch