env variable in JSON file in public folder of CRA

Question

I have this config.json file located in my public folder, in which I need to put some params different in development and in production modes. I fetch it when my app loads ( fetch('config.json').then() ).

Is there a way that my config.json file looks like that :

{
  "url": "%REACT_APP_URL%"
}

Of course, the code above doesn't work : is there another solution ?

Answer 1

If you are using create-react-app, you don't need to use a config file. Simple create a .env file in the root directory and add your environment variables:

URL=REACT_APP_URL

In your app, simple do something like

const url = process.env.REACT_APP_URL

Check out my post https://medium.com/@selom/nice-article-a446406f4447