A common question full-stack developers have is “How do I set the environment variables from my backend in my frontend app?”. For example, your Re

Setting serverless environments variables in a React app

submited by
Style Pass
2021-07-20 17:30:06

A common question full-stack developers have is “How do I set the environment variables from my backend in my frontend app?”.

For example, your React app might be calling an API endpoint in your backend. You ideally don’t want to hard code this in your frontend app. The main reason being, you might deploy your full-stack app to multiple environments and you’d like your React app to call the right API endpoint.

As an example, let’s look at a really simple full-stack SST app. It has a simple Hello World API endpoint. And a React.js app.

On the React side, we’ll now want to pick the environment variable up. To do this, we’ll use a really simple CLI (@serverless-stack/static-site-env) that reads from this file and sets it as a build-time environment variable in React.

We need our React app to be deployed with our environment variables. SST uses CDK internally, so the flow looks something like this.

Leave a Comment