CODEWITHSUNDEEP
javascriptnode.jsreactjsenvironment-variables
VersifiXion
VersifiXion

Reputation: 2292

How to edit environment variable for development and production?

I want to deploy a React app + Node server on Heroku,

I saw that if you use create-react-app, you can use process.env.NODE_ENV to know if you're in development or in production, but I always get "development", it doesn't work, so I tried this :

.env

REACT_APP_ENV=dev

In the React app, I tried to console log the variable, but it still at undefined 

console.log("env ", process.env.REACT_APP_ENV); <-- output: undefined

But in the server, the console log is right,

if (process.env.REACT_APP_ENV === "prod") {
  app.use(express.static("build"));
  app.get("*", (req, res) => res.sendFile(path.resolve("build", "index.html")));
} else if (process.env.REACT_APP_ENV === "dev") {
  console.log("ENV ", process.env.REACT_APP_ENV); <-- output: "dev"
}

What is the easiest way to have a variable at "prod" when I'm in production, and at "dev" in development please ?

Thanks

Upvotes: 1

Views: 4782

Answers (1)

Gasim
Gasim

Reputation: 7991

From what you have written, my understanding is that you are trying to the same environmental variables as in .env.development and .env.production. Default path that dotenv package checks is path.resolve(process.cwd(), '.env'); so, you need to change it:

const env = process.env.NODE_ENV || 'development'; // if nothing is given, set it as development.
require("dotenv").config({ path: path.resolve(__dirname, `.env.${env}`) });
// ^ do checks to make sure that random env vars are not written

Now, when you run your scripts, you need to run it by attaching the env vars to it:

NODE_ENV=development nodemon server.js
NODE_ENV=production nodemon server.js

As a result, dotenv will read .env.development and .env.production, respectively. CRA does this by default and it is not overridable:

npm start -> development
npm start -> production

There is nothing you can do about it (maybe eject but no need to do it). Just prepend the environmental variable in your scripts:

"scripts": {
  "server:dev": "NODE_ENV=development nodemon server.js",
  "start": "concurrently \"npm run server:dev\" \"npm run client\"",
  "server:prod": "NODE_ENV=production nodemon server.js",
  ...
}

I would also like to mention that, this is something that might be useful in development environment to see how the production app is visible; however, in majority of scenarios, these variables should be set in the build / platform environment. For example, CI tool should set the env var as production; so that, you can see your website in the staging server. I would suggest you to only run the production script server:prod in dev environment and create another script that can be run universally without needing to manually show the env vars.

EDIT: Changed names of some scripts and added development fallback for env var.

Upvotes: 1

Related Questions