Continuous Deployment Pipeline for React App on AWS S3 + CloudFront

A simple review of how to create a continuous deployment pipeline for a single page application (ReactJS) without a server using AWS S3 + CloudFront.

Image from Unsplash

Introduction

As with anything in engineering, there are a multitude of valid ways to accomplish creating a deployment pipeline for a single page application (SPA).

Here, we will go over hosting a single page application using S3 + CloudFront and using AWS’ Codepipeline to automatically deploy the application.

By the end of this tutorial you will have a pipeline that performs the following steps:

1. Detects pushes to a specific branch in a Git repository.
2. Builds a staging version of the application from source.
3. Deploys a staging version of the application.
4. Awaits for manual approval.
5. Deploys a production version of the application.

S3 + Cloudfront Hosting of Single Page Application

Before starting on the pipeline portion of the application let us go over how to serve a SPA using S3 + Cloudfront.

Step 1: Create S3 Bucket

1- Go to the bucket creation page in the AWS Console and create a new bucket with public access enabled.

2- In the properties tab, enable public website hosting and set index document to index.html. This will be the entrypoint for our application.

Step 2: Create Cloudfront Distribution

In order to serve the application over HTTPS and decrease response time, we will be using Amazon’s CDN called Cloudfront.

1- Go to the creation page for Cloudfront.

2- Copy the website endpoint from the bucket we created in the previous step.