📢 Update

In v0.33.0, we added the 

ReactStaticSite

construct. It extends the

StaticSite

with out of the box configuration for React SPAs. More importantly, you can now 👉 reference your resources in your React app 👈. For example, you can configure a React environment variable

REACT_APP_API_URL

and set it to the Api endpoint url

new ReactStaticSite(this, "ReactSite", {
  path: "path/to/react-app",
  environment: {
    REACT_APP_API_URL: api.url
  }
});

And refer to it in your React code like this

// App.js
console.log(process.env.REACT_APP_API_URL);

Read more about using React environment variables here - https://docs.serverless-stack.com/constructs/ReactStaticSite

Curious what's specific to React in this?

Create React App has a concept of environment variables (https://create-react-app.dev/docs/adding-custom-environment-variables/). So this construct lets you set those based on your stack outputs.

I’m also a little confused, could you not set the environment variables with the original StaticSite construct and have CRA pick up on them?

I use Snowpack which has a similar concept, prefix env vars with SNOWPACK_ENV

Yeah and the docs do make it seem like SST is limiting what environment variables can be provided

Environment variables must start with 

REACT_APP_

.

Yeah it’s not really React specific per se but more just the convention. We’ll likely extend support like this to all the common static site frameworks that have a concept like this.

Good to know you just added this for CRA at least. We were just about to deploy our CRA 🙂. Thanks! We’re really liking SST so far.

And yeah you could configure the StaticSite construct to do this. This just makes it a bit more intuitive to setup. https://github.com/serverless-stack/serverless-stack/blob/master/packages/resources/src/ReactStaticSite.ts