How to deploy your React App with AWS S3

(HTTPS, Custom Domain, a CDN and continuous deployment)

Hi there,

I’m Andrew and I am a JavaScript contractor based in London. In this post I will be guiding you through the process of deploying a React app on AWS S3. This tutorial includes setting up HTTPS, buying a custom domain, using a CDN and continuous deployment.

What we will be building:

Here is a deployment of the app we will be building: https://react-s3-intro.co.uk/ (Notice the custom URL and HTTPS).

The technologies used in this guide are:

Amazon S3 (https://aws.amazon.com/s3/) for static web hosting

(https://aws.amazon.com/s3/) for static web hosting Buddy for continuous deployment

for continuous deployment Github for hosting your source code

for hosting your source code Amazon Route 53 (https://aws.amazon.com/route53/) for your domain registration/management

(https://aws.amazon.com/route53/) for your domain registration/management Amazon CloudFront (https://aws.amazon.com/cloudfront/) for your CDN

(https://aws.amazon.com/cloudfront/) for your CDN AWS Certificate Manager (https://aws.amazon.com/certificate-manager/) for providing certificates to make your app secure

(https://aws.amazon.com/certificate-manager/) for providing certificates to make your app secure AWS Identity and Access Management (IAM) for creating an account with restricted permissions for Buddy

Prerequisites:

A Github account (https://github.com/join)

An AWS account (https://portal.aws.amazon.com/billing/signup#/start)

A Buddy account

Node installed (https://nodejs.org/en/download/)

Creating our app:

For this introduction, we will be using Create React App (https://facebook.github.io/create-react-app/). To get started, run the following commands in your terminal:

npx create-react-app introduction

cd introduction

yarn start

If you navigate to http://localhost:3000/ you should see the following: