Watching build mode on Create React App

README.md

Create React App does not provide watching build mode oficially (#1070).

This script provides watching build mode for an external tool such as Chrome Extensions or Firebase app.

How to Use

Create a React app.

Put the script into scripts/watch.js.

Add watch task into the scripts block in package.json as follows:

  "scripts": {
    "start": "react-scripts start",
    // Add next line
    "watch": "node scripts/watch.js",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

Run the watch task.

npm run watch

Change source code and check build output.

Directory structure may be following:

• app/
  • src/
  • public/
  • scripts/
    • watch.js (need to add)
  • package.json (need to modify)
  • build/ (output)

watch.js

process.env.NODE_ENV = 'development';

const fs = require('fs-extra');
const paths = require('react-scripts/config/paths');
const webpack = require('webpack');
const config = require('react-scripts/config/webpack.config.dev.js');

var entry = config.entry;
var plugins = config.plugins;

entry = entry.filter(fileName => !fileName.match(/webpackHotDevClient/));
plugins = plugins.filter(plugin => !(plugin instanceof webpack.HotModuleReplacementPlugin));

config.entry = entry;
config.plugins = plugins;

webpack(config).watch({}, (err, stats) => {
  if (err) {
    console.error(err);
  } else {
    copyPublicFolder();
  }
  console.error(stats.toString({
    chunks: false,
    colors: true
  }));
});

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml
  });
}

It seems to inject the css into the bundle.js (or whatever your output js filename is) instead of serving it as a separate file. I don't think that matters much in development anyways

Thank you! You wrote a great script, so useful! I saved myself a lot of time with it. Currently I'm thinking about how to get around a tiny glitch: when you don't write new code to, say, App.js file, and you want to save it anyway to trigger a reload - you somehow end up with removed bundle.js and the empty build/statis/js directory. If you want to get your bundle.js back - you can actually modify the code in App.js and re-save it or you also can restart the npm script. That's [email protected], Linux (Windows as well).

As a note to all reading this, it seems CRA has changed their config structure around. So this won't work anymore. With a few minor attempts to fix it, I couldn't get this to work.