Using process.env when react server side rendering

Question

I have a react app that works pretty well client-side and am now attempting to have it work server-side.

I am using it with the create-react-app boilerplate: https://github.com/facebookincubator/create-react-app

I am running into an issue where I store some environment variables in .env, however on the server I cannot access these variables.

So a line such as axios.get(process.env.API_URL + 'something') will through a 404 because process.env.API_URL is undefined.

It is my understanding that .env is the file I should be using for stuff like this. Am I incorrect? Should I be using another method to store common environment variables? Or is there some way to get the node server to recognize these values?

lukeaus · Accepted Answer · 2018-05-29 10:40:26Z

1

You can (should) serve the production build.

When you make npm run build webpack takes the entries on your .env file and replaces them on the build with the corresponding values.

For server-side rendering you'll have to define the environment variables in your node server, either as system environment variables or on a .env read by your back-end server (which could be the one webpack-dev-server is using).

edited May 29, 2018 at 10:40

lukeaus

12.4k8 gold badges54 silver badges61 bronze badges

answered Sep 7, 2017 at 17:30

SrThompson

5,7582 gold badges20 silver badges25 bronze badges

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

Comments

vspedr · Accepted Answer · 2019-10-30 12:32:58Z

0

According to Create React App docs, in order to expose environment variables to React both in static and SSR apps, the variable names must be prefixed with REACT_APP_. This prevents sensitive and/or unnecessary variables from being included in the javascript bundle.

answered Oct 30, 2019 at 12:32

vspedr

211 silver badge3 bronze badges

Collectives™ on Stack Overflow

Using process.env when react server side rendering

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related