Search…
Hot Reload Drupal
Use BrowserSync to hot reload Drupal after changes

Instructions

    1.
    Install BrowserSync and BrowserSync Webpack plugin
1
npm install --save-dev browser-sync browser-sync-webpack-plugin
Copied!
2. In webpack/plugins.js, add the following (this example uses a Lando url):
1
const _BrowserSyncPlugin = require('browser-sync-webpack-plugin');
2
3
const BrowserSyncPlugin = new _BrowserSyncPlugin({
4
proxy: 'http://PROJECT.lndo.site',
5
port: 32778,
6
});
7
8
module.exports = {
9
...
10
BrowserSyncPlugin,
11
};
12
Copied!
3. In webpack/webpack.dev.js, add the following:
1
const plugins = require('./plugins');
2
3
module.exports = merge(common, {
4
...
5
plugins: [
6
plugins.BrowserSyncPlugin,
7
],
8
});
Copied!
This will add hot reloading for Drupal for a Lando project. Your local environment may require different settings (proxy, port, etc.). See BrowserSync's docs for more info.

Troubleshooting:

If you do not see your changes hot reloading when editing files, make sure your Drupal caching settings are completely disabled.
Last modified 1yr ago