4

My project's structure is:

.
├── backend
│   ├── node_modules
│   ├── package.json
│   ├── routes
│   └── server.js
├── frontend
│   ├── node_modules
│   ├── package.json
│   ├── public
│   └── src
├── node_modules
├── package.json
└── .env

Where frontend is a React app and backend is an Express app. I have an environment variable API_KEY=... in .env that I need to use in both the backend in the frontend apps.

  • In the Express backend app, I can access it easily using process.env.API_KEY without issues, even though it's outside of the backend app folder.

  • However, I also need to access that key from the React frontend app, which returns undefined when I use process.env.API_KEY. From React docs, it is said that for a React app you need to:

    1. Name the variable REACT_APP_API_KEY
    2. Make sure that it is located inside of the React app directory.

    So yeah, I could create another .env file inside of the React app and follow these instructions, but I feel like it is adding unnecessary duplicated code:

    1. I'd have two .env files which seems a bit confusing.
    2. I'd have the same secret key in two different files, which is also confusing, and every time it changes I have to edit two files instead of one.
    3. I'd have to protect that new .env file from my version control software, which increases vulnerability.

Are there any workarounds that would enable me to just have the API key in the root directory of the project? Is it common practice to have same api key in multiple files?

gnarois
  • 199
  • 1
  • 4
  • 11
  • What's the issue? At compile time react should actually refer the value and replace it. You can use only one .env file in the root – Julian Kleine Nov 23 '20 at 22:54
  • Oh is it because the two env vars are named different? – Julian Kleine Nov 23 '20 at 22:55
  • Did you check out this documentation https://create-react-app.dev/docs/adding-custom-environment-variables/? – Julian Kleine Nov 23 '20 at 22:55
  • Actually thought it's create-react-app, as it's not, how do you build your application? – Julian Kleine Nov 23 '20 at 22:56
  • 2
    Is this API key a private one? If so it shouldn't be used directly in the front end. It's usually kinda messy to share environment files between front and back end. I know that since it's an express server it uses Javascript and NPM and such, so it seems easier to share, but it creates a big mess. Best to treat front end and back end like different projects, so the node modules and environments files and config and all that aren't all mixed together. But short of separating them, you can duplicate the value in `.env`, one called API_KEY and one called REACT_APP_API_KEY – Jayce444 Nov 23 '20 at 22:57
  • @JulianKleine I'm just not familiar with having multiple .env files (one in the root and one in the react app). From the responses, I guess it's okay to have multiple .env files that share the same key... Yes the react app was made with create-react-app – gnarois Nov 23 '20 at 23:17
  • 1
    I am having the exact same issue. I couldn't get react to pull in the environment variable if it wasnt in the App root folder. I had to settle for 2 different .env files. – Reno Nov 24 '21 at 22:33

1 Answers1

-1

IF WORKING ON MERN PROJECT>>>

{ROOT DIRECTORY PACKAGE.JSON}

"scripts": {
    "start": "node backend/server.js",
    "server": "nodemon backend/server.js",
    "client": "npm start --prefix frontend", // frontend is my react folder 
    "dev": "concurrently \"npm run server\" \"npm run client\" "  }

Add this kind of scripts in your package.json of root directory .

And then run "npm run client" from the root directory (i did run frontend command by client key...thats why i run npm run client)

OR THE OTHER SIMPLE THING YOU CAN DO IS IF YOU ONLY WANT YOUR REACT APP TO START....

run simple line from root directory....

npm start --prefix frontend

(As frontend is your react folder)
Nisarg Soni
  • 1
  • 1