How to create a React.js app with serverless

Chapter Comments
1

Link to chapter — https://serverless-stack.com/examples/how-to-create-a-reactjs-app-with-serverless.html

2

I receive the following error, when I use sst.StaticSite:

Screenshot 2021-06-21 at 20.26.36
Screenshot 2021-06-21 at 20.26.362488×318 88.8 KB

I tried eu-central-1 and us-east-1. With aws configure, I use an IAM user with AdministratorAccess. I tried configuring bucket as well.

const site = new sst.StaticSite(this, "ReactSite", {
      path: "frontend",
      buildOutput: "build",
      buildCommand: "npm run build",
      s3Bucket: {
        removalPolicy: RemovalPolicy.DESTROY,
        publicReadAccess: true,
      },
    });
3

Hey @chanm003, thanks for bringing it up. I just pushed out a release v0.29.2 with the fix.

There’s also a minor change for how error pages are configured for React sites. After you update to 0.29.2, change your code to:

const site = new sst.StaticSite(this, "ReactSite", {
  path: "frontend",
  errorPage: StaticSiteErrorOptions.REDIRECT_TO_INDEX_PAGE,
  buildOutput: "build",
  buildCommand: "npm run build",
  s3Bucket: {
    publicReadAccess: true,
  },
});

This configures the error page to redirect to the index page. Also, we’ve made s3Bucket’s removal policy to DESTROY by default.

Give it a try and let me know if it works for you!

4

Hi @frank , v0.29.2 worked for me. Thanks for the quick turnaround time!

Quick question on StaticSite construct: Each morning when I start my work day, I would run npx sst start to spin up my backend and npm start to spin up React app on localhost:3000

Unless I am missing something, this would result in a npm run build on my frontend and re-deploy it to CloudFront every morning. This seems unnecessary and time-consuming.
Is there a way to set a flag so those steps are skipped? Or are there advantages to not skipping those steps?

5

Hi @frank,

Tutorial has a line “Make sure to replace the API endpoint with the one from your stack outputs above”. Is there a way to avoid manually modifying frontend/src/App.js?

Screenshot 2021-06-23 at 02.00.23
Screenshot 2021-06-23 at 02.00.232422×1166 364 KB

6

Hey @chanm003, just released v0.29.4. StaticSite won’t build on sst start. Release v0.29.4 · sst/sst · GitHub

Tutorial has a line “Make sure to replace the API endpoint with the one from your stack outputs above”. Is there a way to avoid manually modifying frontend/src/App.js?

Yup working on it!! I will keep you posted once we have something. Would love ur feedback on it!

7

To add to this, you can try out this option and SST will replace a value in your frontend, so you won’t have to hard code it.

But we need to figure out a way to integrate better with the React’s npm run start.

8

@chanm003 We rolled out another update to this chapter. It allows you to pass environment variables directly to your React app.

We also wrote about this here: https://serverless-stack.com/chapters/setting-serverless-environments-variables-in-a-react-app.html