38

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.

0

3 Answers 3

28

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 add save 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

2
  • 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
  • 4
    its 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
3

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.

-1

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
2
  • Unfortunatly, cra-build-watch hos not been maintained in 2 years and is already broken with CRA4 and 5
    – SkyNT
    Dec 15, 2022 at 9:37
  • much like CRA itself !!!! 🤣
    – Jacrys
    Nov 17 at 21:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.