Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Watching build mode on Create React App

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)
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
});
}
@altaha

This comment has been minimized.

Copy link

@altaha altaha commented Jan 15, 2018

Thanks! This works for me. Though it seems to only compile the js and media files. It doesn't compile and output the css (whereas the CRA scripts do). am I missing something here?

@L3tum

This comment has been minimized.

Copy link

@L3tum L3tum commented Jan 27, 2018

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

@3rdp

This comment has been minimized.

Copy link

@3rdp 3rdp commented Jun 21, 2018

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 react-scripts@1.1.4, Linux (Windows as well).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment