How to make configuration file to store APIs in React

Question

I want to store APIs in configuration file so when I deployed this on Development or on Production I just have to change the url on config file not in all js file. But I don't know how to use configuration file in react.js

I tried using react-global-configuration but didn't got any results ! Can anyone please tell me how to achieve this ?

Possible duplicate of [React configuration file for post deployment settings](https://stackoverflow.com/questions/51653931/react-configuration-file-for-post-deployment-settings) — Maelig, Jun 04 '19 at 09:11
as I understand you want to separate your dev and prod configuration ? — Maelig, Jun 04 '19 at 10:39
@Maelig yes what you understood is correct but issue in that is quite different. — Shweta Rathi, Jun 04 '19 at 10:49

josemartindev · Answer 1 · 2019-06-04T09:05:28.920

4

I suggest you use the npm package dotenv.

You create a .env file in the root of your repository, and this package helps your project access any variable that's inside your .env file. You just need to:

npm install dotenv

Then you add this line to your App.js

require('dotenv').config()

and you're good to go!

Example:

> cat .env
DB_HOST="https://myserver.herokuapp.com"

To access the variable's name, you just have to call process.env.DB_HOST in your code.

NOTE:

If your project has been created using create-react-app, then you must name the variables like this:

REACT_APP_DB_HOST="https://myserver.herokuapp.com"

and if you want to access it you use:

process.env.REACT_APP_DB_HOST

edited Jun 04 '19 at 09:05

answered Jun 04 '19 at 08:54

josemartindev

1,413
9
17

Thank you @josemartindev for your help...but this didn't worked. – Shweta Rathi Jun 04 '19 at 12:00
@ShwetaRathi why it didn't work? It works perfectly for me and for more than 4million users that download weekly this npm package – josemartindev Jun 04 '19 at 12:20

How to make configuration file to store APIs in React

1 Answers1