Browser-sync guide is not working for production environments

[HeikkiYlipaavalniemi]

I noticed that when following the following guide https://docs.emulsify.info/usage/hot-reload-drupal, it does not work well in production environments.

Currently the guide says that you should install Browser-sync as a development dependency which is good.

But then the guide says that you should add the following code to plugins.js

const _BrowserSyncPlugin = require('browser-sync-webpack-plugin');

const BrowserSyncPlugin = new _BrowserSyncPlugin({
  proxy: 'http://PROJECT.lndo.site',
  port: 32778,
});

module.exports = {
  ...
  BrowserSyncPlugin,
};

But because the plugin is installed as a development dependency its not available in plugins.js.

There is an example in ImageminPlugin how to disable the plugin in production environment but this does not apply to Browser-sync because it does not have a disable option like ImageminPlugin does.

If you are using production node enviroment this gets added always and fails to install with yarn --production.

Would be nice if the plugins.js would take the environment into account before loading plugins since the plugin is a development dependency.

[evanmwillhite]

I'm not sure I understand the need correctly, but the way we handle Webpack development vs. production environments is via the webpack.dev.js file and the webpack.prod.js file. Those both merge the contents of webpack.common.js, which are all the things you want your production and development environments to share.

So to add a plugin implementation only for production, you would add (or move) that plugin implementation from webpack.common.js to webpack.prod.js. Again, I'm not sure I understood the need correctly, but if you want the BrowserSyncPlugin to be in your Webpack production environment, in step 3 of the docs you would add the code to webpack.prod.js instead of webpack.dev.js.

[HeikkiYlipaavalniemi]

Hello,

Thanks for the quick reply and sorry for the bad quality of the original issue.

The issue I saw was that we also have the BrowserSync plugin called in webpack.dev.js. When looking at the files from Emulsify, it seems like all plugins are defined in plugins.js and then called elsewhere. And this results in an error when running in a production environment with process.env.NODE_ENV set to production.

Running the command yarn --production results in the following error:

Error: Cannot find module 'browser-sync-webpack-plugin'

This is of course because BrowserSync is defined as a development dependency in package.json and not installed in production environment.

So I guess the correct fix would be to define BrowserSync somewhere else than plugins.js but I think that would be a good idea to mention in the guide also.

[evanmwillhite]

I am going to close this, but thank you for bringing it up. This should serve as a guide for anyone else who may run into similar problems between dev/prod Webpack implementations.