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"
  }
}

Answer 1

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

Answer 2

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

1. npm install --save dotenv
2. create .env file in the root directory
3. declare there REACT_APP_**VARIABLE_NAME** = dont forget about REACT_APP
4. 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

Answer 3

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

Answer 4

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