npm run build
creates production build of the project. How do I create development build? I'm using gradle-node-plugin to build the artifact. The project has standard create-react-app configuration.
3 Answers
This is not really doable with just create-react-app
, there is an open issue Here and it doesn't look like it will be added anytime soon.
However, you can use a package called dotenv
for that, following are the steps you should take:
Install
dotenv
(make sure to addsave dev
)npm install dotenv-cli --save-dev
In package.json scripts section add new script:
"build:dev": "dotenv -e .env.development react-scripts build",
And you can build for development with
npm run build:dev
PS: if you want to avoid mistakenly deploying dev builds to production (as mentioned here) you can add build:prod
to package.json and disable the regular build
command, see code:
"build:dev": "dotenv -e .env.development react-scripts build",
"build:prod": "dotenv -e .env.production react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",
Also note that process.env.NODE_ENV
will still be production
but it'll load your .env.development file
-
Worked for me, unfortunately (and to my surprise), the build time wasn't noticeably different, so I reverted back to normal Sep 14, 2020 at 20:39
-
4its annoying that even after so many years, we have to jump through hoops to get something simple like a debug/development mode build!. Jul 4, 2022 at 5:55
Thanks, @Moses. This is an extension to the answer posted by Moses Schwartz. You can also make the build pick the environment files dynamically by exporting the value of the environment(development, test, production) in the bash shell. And then you don't have to have different build commands for different environments.
You can use this in your package.json
"start": "dotenv -e .env react-scripts start",
"build": "dotenv -e .env.${REACT_APP_ENVIRONMENT} react-scripts build",
So when your run npm start, it will pick the environment values from .env and when you run npm run build, it will pick the environment values from .env.{REACT_APP_ENVIRONMENT}
To define the REACT_APP_ENVIRONMENT, you can do:
export REACT_APP_ENVIRONMENT="development" or
export REACT_APP_ENVIRONMENT="test" or
export REACT_APP_ENVIRONMENT="production"
Hope this helps. This will help in staging the react application for multiple environments.
Thanks to @Tx_monster comment
github.com/Nargonath/cra-build-watch
A script for create-react-app that writes development builds to the disk
npm install -D cra-build-watch
package.json:
{
"scripts": {
"watch": "cra-build-watch"
}
}
npm run watch
-
Unfortunatly, cra-build-watch hos not been maintained in 2 years and is already broken with CRA4 and 5– SkyNTDec 15, 2022 at 9:37
-