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