Building a dev version of a react application, continuously, for development - reactjs

Question

I just created a react application by running:
create-react-app foo
which created a package.json file with:
{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
npm start and npm run build both run as intended, but this application is the frontend to a Django application, so, to have dev mimic production a bit better I don't want to serve the app with node.js. What I want to do is continuously build the assets, html, js, etc and let Django serve them like any other HTML/JS/CSS. I remember Webpack doing this last time I played with it a couple of years ago.
How do I do it in the context of this react application? In short, how do I make npm run build run continuously on file changes and generate dev assets.

Answer 1

You can install the watch package as a dev-dependency and add a script in your package.json that watch for changes in src folder and run npm run build:
npm install --save-dev watch
// package.json
"scripts": {
"watch": "watch 'npm run build' src/"
}
Then, while you work, keep open a tab with:
npm run watch
Consider, though, that the build could be a long process. It depends on the size of your application.