Skip to content

Instantly share code, notes, and snippets.

@jasonblanchard

jasonblanchard/README.md

Forked from int128/README.md
Last active July 1, 2022 00:19
Show Gist options
  • Save jasonblanchard/ae0d2e304a647cd847c0b4493c2353d4 to your computer and use it in GitHub Desktop.
Save jasonblanchard/ae0d2e304a647cd847c0b4493c2353d4 to your computer and use it in GitHub Desktop.
Download ZIP
Watching build mode on Create React App
Raw
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)
Raw
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
});
}
@3rdp
Copy link

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 [email protected], Linux (Windows as well).

@dougpagani
Copy link

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.

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