Webpack dev server watches Twig
Today, the year 2020, i have two solutions:
Webpack config solution
As you had said: I've seen things about --watchContentBase and contentBase options...
, this has nothing to do with encore. Its a default webpack configurations and you can learn more from webpack doc here
According to Advanced Webpack Config docs here you can extend webpack configs by calling var config = Encore.getWebpackConfig();
I have implemented as shown in the code below. For my case its working fine.
// webpack.config.jsvar Encore = require('@symfony/webpack-encore');var path = require('path');// Manually configure the runtime environment if not already configured yet by the "encore" command.// It's useful when you use tools that rely on webpack.config.js file.if (!Encore.isRuntimeEnvironmentConfigured()) { Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');}Encore // directory where compiled assets will be stored .setOutputPath('public/build/') .setPublicPath('/build') .addEntry('global', './assets/app.js') // ... Your other encore code // EXTEND/OVERRIDE THE WEBPACK CONFIG const fullConfig = Encore.getWebpackConfig(); fullConfig.name = 'full'; // watch options poll is used to reload the site after specific set time // polling is useful when running Encore inside a Virtual Machine // more: https://webpack.js.org/configuration/watch/ fullConfig.watchOptions = { poll: true, ignored: /node_modules/ }; fullConfig.devServer = { public: 'http://localhost:3000', allowedHosts: ['0.0.0.0'], // extend folder to watch in a symfony project // use of content base // customize the paths below as per your needs, for this simple //example i will leave them as they are for now. contentBase: [ path.join(__dirname, 'templates/'), // watch twig templates folder path.join(__dirname, 'src/') // watch the src php folder ], // enable watching them watchContentBase: true, compress: true, open: true, disableHostCheck: true, progress: true, watchOptions: { watch: true, poll: true } };// export itmodule.exports = fullConfig;
Another solution
If you need a simple implementation you can use: webpack-watch-files-plugin. I prefer this, by the time you are reading this answer it might be abandoned but there many others with same functionality. In Symfony docs here you can implement Custom Loaders & Plugins as below. Using the above mentioned plugin we can implent it as follow:
// webpack.config.jsconst WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default;Encore // ...your code .addPlugin(new WatchExternalFilesPlugin({ files: [ '/templates', // watch files in templates folder '/src', // watch files in src folder '!../var', // don't watch files in var folder (exclude) ], verbose: true })) //...your code;
Cheers. Happy coding!
The loader needs to know also the location of the .twig
files, which in Symfony 4 are in /templates
directory. Considering the default structure, this should make it work for you:
... .addLoader({ test: /\.twig$/, loader: 'raw-loader', include: [ path.resolve(__dirname, "templates") ], },) ...
It seems that there is no way to do that (read more on this). As the questioner mentions you can do it with BrowserSync. My preferred Symfony setup is to have two terminals running:
Prerequisites
Install BrowserSync:
npm install -g browser-sync
First terminal
Start the Symfony server on https://127.0.0.1:8000/ and build the assets on https://localhost:8010/:
symfony server:start -d ; yarn encore dev-server --https --port 8010
Second terminal
Reload your browser's request for https://localhost:3000/ every time a Twig file gets changed:
browser-sync start --proxy "https://127.0.0.1:8000/" --files "templates"