Serve a React App from the S3 Bucket

Eetu Tuomala — Tue, 02 Nov 2021 08:21:47 +0000

An S3 bucket is a great place to serve static content like a web app build with React. Here are a few tips and tricks that will help you to get started.

The S3 bucket has a feature that allows static website serving, but the downside is that it doesn't support HTTPS. Nowadays, plain HTTP is not an option. So for HTTPS support, a CloudFront distribution is needed. It also enables custom domain name, Web Application Firewall and a lot of other cool features. And if you have an API in your service, you can add that to CloudFront and serve everything from the same origin to mitigate the CORS pain.

The S3 bucket is not a web server, so routing causes some issues. When using React router, routing works fine when you enter the site, but a 403 error is returned when opening an URL with a route resource, like mydomain.com/users. This is because the browser tries to access the /users file from the bucket, and as it's a React router path, the file doesn't exist in the S3 bucket. If you are wondering why it's 403 instead of 404 is because the bucket is not public.

How to prevent this is to modify the CloudFront error response in case of 403 error to be index.html, which routes all failed requests to the index.html and returns 200 status code.

 errorResponses: [
  {
    httpStatus: 403,
    responseHttpStatus: 200,
    responsePagePath: "/index.html",
    ttl: Duration.seconds(0),
  },
]

This way, every time a file is not found from the path, it returns index.html and React router kicks in and handles the routing.

In the example repository https://github.com/laardee/deploy-react-app there is an infra stack build with AWS CDK and a simple React app that has router included.

Architecture Pattern Library

Eetu Tuomala — Sun, 31 Oct 2021 15:27:08 +0000

We at the MaaS Global go serverless-first when we build our mobile app's backend service. Since 2016 when we started to develop the service, we've used Lambdas, API Gateways, and other managed services that AWS offers.

Our service contains hundreds of Lambdas per stage, dozens of API gateways, S3 buckets, and such. In addition to that, there are dozens of ways to do the same thing in AWS. For example, you can use Lambda, Kubernetes, ECS with Fargate, or plain EC2 instances for computing, and all options come with different features and restrictions. So even for senior engineers, adding new pieces to this puzzle can feel overwhelming. When the organization grows, and new engineers join the team, they also must adopt the internally used practices as part of the onboarding process.

To help engineers with their efforts to architect features consistently, we've introduced a library of patterns that can be used to build larger architectures. It contains simple things like an API gateway, Lambda and PostgreSQL connection, S3 event triggers and queue processing. Also, it includes some high-level patterns such as a webhook proxy and cross-account event routing.

Our patterns library is publicly available in GitHub https://github.com/maasglobal/maas-aws-patterns.

DEV Community: Eetu Tuomala

Serve a React App from the S3 Bucket

Architecture Pattern Library