6

I'm learning React and React-Redux and I'm trying to edit an existing project I found.

Inside the reducers folder there is a file that has this line of code:

const { data } = await client(`${process.env.REACT_APP_BE}/videos`);

But there was no declaration of process.env . Where can I find that file?

Commando
  • 358
  • 3
  • 16
  • It's not a file, `process.env` exposes *environment variables* from the host (actually via Webpack's "define plugin" for client code, I've shown a manual setup similar to CRA's [here](https://github.com/textbook/starter-kit/wiki/Client-environment-variables)). You may also have a `.env` file that sets those variables in your environment, loaded by the `dotenv` package. – jonrsharpe Jan 20 '21 at 19:04
  • 1
    It isn't a file, it's an object with environment variable set before the app is built and run. https://create-react-app.dev/docs/adding-custom-environment-variables/ – Drew Reese Jan 20 '21 at 19:04

2 Answers2

4

That's not a file, it's an environment variable. It is defined in the context of where your application is running, presumably a start script.

Here is an example app and start command to illustrate:

main.js:

console.log(process.env.MY_VAR);

started using:

> MY_VAR="hello world" node main.js
hello world

Added: As others pointed out, if you created your apps using create-react-app then this article describes how to use .env files in your project root folder to set such environment variables. For that it appears to be using this package, which you might find useful also in other contexts.

Otherwise I would look at the way you start your app (script/command) and follow the execution path until you find where that environment variable is set.

Christian Fritz
  • 20,641
  • 3
  • 42
  • 71
  • You should use [.env and/or .env.local](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env) for react apps. And yes, it is a file – HMR Jan 20 '21 at 20:37
  • `.env` is a file, but `process.env.REACT_APP_BE` isn't, and that's what the OP's original question was about ("Where can I find that file process.env.REACT_APP_BE?"). – Christian Fritz Jan 20 '21 at 20:45
  • Well, it should be defined in a file during development when you run the project with `yarn start` and even `yarn build` would use [.env.production (.local)](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env). Usually only actual environment variables are used/set up when you build with CI. The react-script will set up the values in the file as environment variables but you usually won't set up the variables yourself like you suggest in your answer. – HMR Jan 20 '21 at 21:58
  • 1
    `I would look at the way you start your app (script/command) and follow the execution path until you find where that environment variable is set.` could be replaced with [this](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env) – HMR Jan 20 '21 at 22:00
  • @HMR using `.env` and associated libraries like `dotenv` is entirely a matter of prefrence, and the statement "Usually only actual environment variables are set up when you build with CI" is also incorrect since it assumes everyone is using the exact same workflow that the Facebook devs recommend using for their starter template. – Zac Anger Jan 20 '21 at 23:11
2

To add on to Christian's answer, the process is a Node global object that holds info and utilities related to the current running process, also including argv (the argument list), uptime, etc. process.env lists all current environment variables (you can see this by running node and then running process.env in the Node REPL). Those environment variables are from your system, your shell config, and in the context of Node project, also loaded in from sources like a .env file (usually using a library like dotenv) and a docker-compose file. On macOS and Linux, you can see all the current environment variables for your shell session by running env (on Windows it would be SET).

Zac Anger
  • 6,983
  • 2
  • 15
  • 42