How to edit .env file after build completed reactjs

Question

i had build react app web page with custom environment variables
the problem is when i build the script and change the .env variables no thing change in the website !

.env file :

REACT_APP_SITENAME=TheSiteName App

@Mihai because i want to sell the script and how buy it can change and customize the app :D — Tawfeeq, May 13 '19 at 19:40
When you change the .env file, you will need to rebuild it for the changes to apply. — Code-Apprentice, May 13 '19 at 22:16

Auskennfuchs · Accepted Answer · 2020-04-21T19:12:41.480

After building a react app all code is static and can't be changed. I think the only solution to send some dynamic data to your react app is to either create a special file per system you running your app on and load this directly inside the index.html or create the content of this file on the fly. So when you're using create-react-app in public/index.html add something like this:

<head>
...
<script src="https://www.example.com/envconfig.js" type="text/javascript">
</script>
...
</head>

This file should contain the environmental config, e.g.:

window.globalConfig = {
    siteName: "The Sitename App"
}

The file can also be created on the fly by PHP, Java or any other backend service. Just make sure to answer as valid Javascript.

And in your React app at index.js, App.js or anywhere you can access this variable as it is global:

   const appConfig = window.globalConfig || { siteName: process.env.REACT_APP_SITENAME}

With this you've got an fallback to the static env config if globalConfig is not available, likely in development. Now you can use appConfig in any way and provide it via redux, context or property to your components.

Last thing to mention, you have to make sure that the config-file is loaded before executing all the React code. So the file should be loaded before all the created React files.

Note that the script tag should be closed by it's end tag "" instead of using the self-closing version. Without it this solution does not work correctly in Chrome. — martinnemec3, Apr 21 '20 at 12:14
@martinnemec3 You are right, thanks for mentioning. I've corrected my answer. — Auskennfuchs, Apr 21 '20 at 19:13

Randy Casburn · Answer 2 · 2019-05-13T20:39:09.830

2

Quote from the docs:

The environment variables are embedded during the build time.

It isn't possible to apply environment changes as runtime.

Reference

Here is an example of how to use the environment at runtime:

CodeSandbox

edited May 13 '19 at 20:39

answered May 13 '19 at 19:34

Randy Casburn

13,840
1
16
31

thank you ,is there is any way to config and customize the app after build ? – Tawfeeq May 13 '19 at 19:41
Only through the use of JavaScript at runtime. This is not Java if that is your background. – Randy Casburn May 13 '19 at 19:42
My background is php :D .. How can i do it ? like fetching sitename or site logo image url from json and putting it in reactjs – Tawfeeq May 13 '19 at 19:46
No longer accepted answer? Why? How can I help further? – Randy Casburn May 13 '19 at 20:52
thank you for your time , how can i config the website after build :( like the sitename or any think – Tawfeeq May 13 '19 at 21:27
Did you see the CodeSandbox I provided in the answer? – Randy Casburn May 13 '19 at 21:45
i see it yes .but when change the env file after build no thing will be changed :( ..this sandbox is not a build right? – Tawfeeq May 13 '19 at 21:49
@TawfekMohammed "like fetching sitename or site logo image url from json and putting it in reactjs" That is one solution. Another solution is to rebuild the script each time you change the `.env` file. – Code-Apprentice May 13 '19 at 22:17
@RandyCasburn thank you very much for your time see the accepted anwer – Tawfeeq May 14 '19 at 00:44

score 1 · Answer 3 · answered Jan 27 '23 at 16:04

here is an idea:

add a json file (e.a. config.json) with your configuration to the "public" folder. That file will be in the root of the build:

{ "name": "value" }

in your React code, create a static class with the variable you want to configure:

class Config { static name= "[default value overwritten by the config]"; }

somewhere high in the startup of your React application, read the json and set the static variable:

fetch("config.json") .then((r) => r.json()) .then((data) =>{ Config.name=data.name; })

now you can use that config anywhere you need it :

Config.name

Note that any configuration you make will be vulnerable for public eyes, since the file can be opened directly with a URL. Also note that when deleting that json file, everything will still work with the default value. You could implement some check that the file must exist.

How to edit .env file after build completed reactjs

3 Answers3

Linked