Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

#Browsersync - Webpack + React Transform HMR


To try this example, follow these 4 simple steps.

Step 1: Clone this entire repo

$ git clone bs-recipes

Step 2: Move into the directory containing this example

$ cd bs-recipes/recipes/webpack.react-transform-hmr

Step 3: Install dependencies

$ npm install

Step 4: Run the example

$ npm start

Additional Info:

To see react-transform-hmr in action, edit js/HelloWorld.jsx

Preview of app.js:

 * Require Browsersync along with webpack and middleware for it
var browserSync = require('browser-sync');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

 * Require ./webpack.config.js and make a bundler from it
var webpackConfig = require('./webpack.config');
var bundler = webpack(webpackConfig);

 * Run Browsersync and use middleware for Hot Module Replacement
    server: {
      baseDir: 'app',

      middleware: [
        webpackDevMiddleware(bundler, {
          // IMPORTANT: dev middleware can't access config, so we should
          // provide publicPath by ourselves
          publicPath: webpackConfig.output.publicPath,

          // pretty colored output
          stats: { colors: true }

          // for other settings see

        // bundler should be the same as above

    // no need to watch '*.js' here, webpack will take care of it for us,
    // including full page reloads if HMR won't work
    files: [