Using environment variables in React application

Question

Our JavaScript resource just quit, so I, knowing nothing about front-end development, need to get my UI stood up. I'm trying to use an environment variable in the javascript, and it seems like there are 100 different ways to do it.

All I know is this is a react/node app. I start it with npm run start. It needs an endpoint I've defined in my .bash_profile, XREFS_BACK_URL. I thought I could just use process.env.XREFS_BACK_URL, but apparently that has to be defined in some file? I don't know what file or where it should be located.

Sorry to be so clueless - this just landed in my lap and I have to get it up quickly!

Update:

I created a .env file in the root directory. It's one line:

REACT_APP_XREFS_BACK_URL=http://localhost:8080

In my code, I try to use it like so:

var endpoint = process.env.REACT_APP_XREFS_BACK_URL;
console.log("endpoint is " + endpoint);

But the console shows that endpoint is UNDEFINED.

My package.json is here:

{
  "name": "bulletin-board",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "babel-jest": "^22.4.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "jest": "^22.4.2",
    "react-scripts": "0.2.1",
    "react-test-renderer": "^16.2.0",
    "webpack": "^4.6.0"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "match-sorter": "^2.2.1",
    "namor": "^1.0.1",
    "npm": "^6.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-draggable": "^2.2.0",
    "react-table": "^6.8.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "moduleFileExtensions": [
      "js",
      "json",
      "jsx"
    ],
    "moduleNameMapper": {
      "^.*[.](jpg|JPG|gif|GIF|png|PNG|less|LESS|css|CSS)$": "EmptyModule"
    },
    "preprocessorIgnorePatterns": [
      "/node_modules/"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/EmptyModule.js"
    ]
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

are you using webpack? if so theres things that take them and burn them in. — Daniel A. White
– Daniel A. White, Commented May 1, 2018 at 19:46
ah bingo... you have a really old version of react-scripts. try updating your react-scripts and restarting. npm install --save-dev [email protected] — azium
– azium, Commented May 1, 2018 at 20:12

azium · Accepted Answer · 2018-05-01 19:52:56Z

3

Your app was made with create-react-app. Here are the docs for adding / referencing environment variables: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

Create a file in the root folder called .env with the contents:

REACT_APP_XREFS_BACK_URL=put_whatever_here

Then access this variable in your JavaScript via:

process.env.REACT_APP_XREFS_BACK_URL

answered May 1, 2018 at 19:52

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

aatuc210 Over a year ago

I put the .env file in the root of the app, but REACT_APP_XREFS_BACK_URL is still UNDEFINED.

azium Over a year ago

did you restart the application

aatuc210 Over a year ago

I promise I did!

azium Over a year ago

can you update your question with your .env file, the code where you are console logging it and the version of react-scripts in your package.json

azium Over a year ago

it's process.env.REACT_APP_XREFS_BACK_URL; not process.env.XREFS_BACK_URL;

|

ViktorKushnarov · Accepted Answer · 2021-02-05 17:34:22Z

0

Dont sure, if it actual for you, CNDyson, but I think it might be helpful for newers like me:

npm install --save dotenv
create .env file in the root directory
declare there REACT_APP_**VARIABLE_NAME** = dont forget about REACT_APP
use it like this: process.env.REACT_APP_**VARIABLE_NAME**

Highly recommend to explore these links:

https://create-react-app.dev/docs/adding-custom-environment-variables/ -official documentaion

https://www.npmjs.com/package/dotenv - dotenv

answered Feb 5, 2021 at 17:34

ViktorKushnarov

11 bronze badge

Comments

Joseph Garrone · Accepted Answer · 2021-03-17 15:54:21Z

0

The problem is that usually you want to access the environments variables present on the server that host your application.

With the described solution you will never be able to do docker run --env FOO="value of foo" my-org/my-app then access FOO in the app like process.env["FOO"].

create-react-app bundle the environment variables that are defined when you run yarn build.

If you want, for example, access the environment variables defined in the docker container check out: react-envs

edited Mar 17, 2021 at 15:54

answered Mar 16, 2021 at 21:44

Joseph Garrone

1,8221 gold badge21 silver badges22 bronze badges

Comments

SUMON H. · Accepted Answer · 2022-05-06 18:34:41Z

0

At first create a file named env.local beside package.json and try to secure environment variables REACT_APP_YOUR ENV FILE NAME

now set the secured name to your firebase file and push it

as simple as that

answered May 6, 2022 at 18:34

SUMON H.

11 bronze badge

Collectives™ on Stack Overflow

Using environment variables in React application

4 Answers 4

19 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

19 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related