cra-build-watchA script for create-react-app that writes development builds to the disk
The builds resulting from this script are NOT for production environment. They lack various optimizations.
This script is meant as a temporary workaround for
create-react-app project based until this feature is built-in into
react-scripts. See create-react-app#1070.
This script is inspired by other work related such as: https://gist.github.com/jasonblanchard/ae0d2e304a647cd847c0b4493c2353d4.
This tool handles ejected projects but it assumes you did not modify your
env.js utils. If you did I cannot guarantee that this tool will work.
Why do I need this?
As of now (20/04/2018),
create-react-app (more precisely
react-scripts) does not allow development builds to be written to the disk because it uses
webpackDevServer to serve your build files and folders (for good reasons). The problem is that in some cases you need to have these files written to the disk i.e:
- Developing browser extensions using React.
- Incorporating your React application into an existing application.
- Serving your React app with a dedicated backend.
react-scripts >= 1.0.x, hence it supports the newest version
Add it to your project using
npm install -D cra-build-watch
yarn add -D cra-build-watch
Add a new script into your
Run that script:
npm run watch
By default the script will generate everything into
build/ at your project root and remove the public path from webpack's configuration.
If those defaults do not work for you, the script accepts some arguments:
-b|--build-path: expects either an absolute or relative path. If a relative path is given it will be prefixed by your project root path.
--react-scripts-version: expects the
react-scriptsversion you are using in your project i.e
2.0.3. If not given it will be implied from your
node_modulesand if it cannot be implied the version
2.1.2will be the default. Consider setting it if you ejected and are not using the latest
-p|--public-path: expects a relative URL where
/is the root. If you serve your files using an external webserver this argument is to match with your web server configuration. More information can be found in webpack configuration guide.
- default: "".
-v|--verbose: display webpack build output.