Create-react-app: Change .env file after build

[ryan-ds17]

Is this a bug report?

No

Is it possible to update the .env file after creating the build?
I changed the .env file after the build but it doesn't reflect.

Is there any possible way to inject configuration in my react app as everytime I change a configuration, a build is required which nullifies the use of the .env file

[bondz]

Browsers do not support process.env variables which is what your .env file is turned into. Those variables are injected into your app using Webpack. If you change it, CRA has no way of detecting and modifying your app until it is rebuilt.

If you want dynamic environment variables, you can put include it as JS your app can load at runtime, but you'll have to commit the file as well, so, might not really be what you want.

[ryan-ds17]

Is there any way I can inject external config at runtime without re-building and without adding the file to version control?

A package like this https://www.npmjs.com/package/config

[gaearon]

No. CRA produces a static HTML/JS/CSS build. There’s no way for statically served files to “read” some injected config from a file at runtime. It just doesn’t make sense as a concept.

You can, however, do anything client-side JS can do. For example, fetch some values from the server. Or inject them into your HTML on the server, and then read them from JavaScript. This is described here.

[FreeClimb]

Hi! I'll try to explain why this possibility is needed:
For example, I publish the CRA app and use .env file for setting REACT_APP_ROOT_URL of the web api.
After creating the build the url address of the web api may change, so it would be convenient to keep the .env file in the /build folder, and be able to modify it without re-building.

[krish14011995]

Any updates?

[Montrazul]

In times of CI and CD it is highly needed to be able to change the .env at runtime.

[mike20007]

Any thought on this?
If the API_URL service provider changes, modifying the env file and rebuilding all the apps will be a huge project by itself.
Thanks!

[rovansteen]

Did you read the comments? This is technical not possible because CRA produces a static build.

[Montrazul]

And it cant be changed? Dont know much about it. A way around that problem is having a configuration service where you fetch stuff at runtime.

[rovansteen]

The only way that could be changed is if CRA would not be static anymore and includes some sort of a server setup that would read the content of a .env file on runtime. But that’s far outside of the scope and philosophy of CRA. You can easily add some sort of behavior like this yourself by fetching the data from the API or serving CRA via a server side language like NodeJS or PHP and injecting these variables as JSON or directly on the window object.