How to use environmental variables in React build?

Question

In my React application I use some environmental variables that are going to be changed from time to time. I noticed that after running 'npm run build', all environmental paths get hardcoded. E.g. const server_address = process.env.REACT_APP_SERVER_ADDRESS; becomes REACT_APP_SERVER_ADDRESS:"http://192.168.42.135:3000

Is there any way to still use the environmental variables in deployment after the build?

No, if you need a variable that changes dynamically "from time to time," you should create a variable in your app that changes based on some actions. You don't have access to process.env, which is only accessible server-side, once you build your app that runs client-side. — goto
– goto, Commented Feb 1, 2021 at 14:00
i think there is a missunderstanding.I don't want to enable user to modify the variables, but the web server administrator. For example, the app will be deployed in different networks, so I'd like to adjust the server address by modifying the .env and restarting the web server, as it was possible before build using npm start. — upper cut
– upper cut, Commented Feb 1, 2021 at 14:14
Did you try this -> medium.com/@ferie/… ?? Its for angular but I think you can use it — rad11
– rad11, Commented Feb 1, 2021 at 14:21
@uppercut then you need to generate a new build that uses the appropriate values for environment variables. You cannot do what you're asking for - once the client-side code is generated and it runs client-side it has no access to the server-side environment variables. — goto
– goto, Commented Feb 1, 2021 at 14:46

Vikas Saini · Accepted Answer · 2021-02-01 14:13:32Z

1

To address directly, Javascript cannot access Env variable of the OS you are executing it on, Once React is compiled and JS is generated, that's it, no more access to variables from Environment, also access are not really given to React in compilation, but to the transpiler or bundler which runs on node (Node always have access:-) ). But some solutions are here

API That returns latest secret whenever it's called.
Socket pushes new secret to app whenever secret changes.

Happy Coding Comrade :-)

answered Feb 1, 2021 at 14:13

Vikas Saini

4862 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Karol Borkowski Over a year ago

I think that the author doesn't want to use the .env that is on the user's computer, but on the web server.

goto Over a year ago

Pushing secrets like that is a not a great idea and a huge security risk. What the OP is asking for is not possible without creating a new build per environment.

Vikas Saini Over a year ago

@goto1 agreed, its risk, but can be a token or something else.....which cannot be compromised

Collectives™ on Stack Overflow

How to use environmental variables in React build?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related