How to set build .env variables when running create-react-app build script?

by

I imagine you got this working by now, but for anyone else that finds this, you set your default environment variables in a .env file at the root of your “create-react-app” project.

To separate out the variables used when using npm start and npm run build you can create two more env files – .env.development and .env.production.

npm start will set REACT_APP_NODE_ENV to development, and so it will automatically use the .env.development file, and npm run build sets REACT_APP_NODE_ENV to production, and so it will automatically use .env.production. Values set in these will override the values in your .env.

If you’re working with other people, and have values specific to your machine only, you can override values in .env.development and .env.production by adding those values to a new file – .env.development.local and .env.production.local respectively.

EDIT: I should point out that the environment variables you have set must start with “REACT_APP_”, eg. “REACT_APP_MY_ENV_VALUE”.

EDIT 2: if you need more than just development, and production, use env-cmd, as specified by this comment.

More Related Contents:

  1. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  2. How should I configure create-react-app to serve app from subdirectory?
  3. Relative path in index.html after build
  4. combine react build output into single js file
  5. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  6. How to fix missing dependency warning when using useEffect React Hook
  7. The create-react-app imports restriction outside of src directory
  8. Dynamically import images from a directory using webpack
  9. How to specify a port to run a create-react-app based project?
  10. where is create-react-app webpack config and files?
  11. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  12. IMAGE: You may need an appropriate loader to handle this file type
  13. deploying create-react-app to heroku with express backend returns invalid host header in browser
  14. Error while creating new React app (“You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)”)
  15. Nextjs: Unable to load images from static folder
  16. Blank page after running build on create-react-app
  17. Unable to create new react app with npx create-react-app
  18. webpack can’t find module if file named jsx
  19. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  20. react long press event
  21. Create-React-App Proxy in Production Build
  22. What is public/manifest.json file in create-react-app?
  23. create-react-app: how to use https instead of http?
  24. Disable ESLint that create-react-app provides
  25. Importing images breaks jest test
  26. Webpack & Typescript image import
  27. Cache busting with CRA React
  28. Unable to load images from static folder
  29. create-react-app is not working since version 4.0.1
  30. ‘React’ was used before it was defined

Leave a Comment