Deploy React App to AWS — S3 bucket with CI/CD

Updated 2022

Background: So you finished on your awesome React Webapp but now you are ready to publish it for the world to use it.

You could publish your React Web Application on many services like:

1. Google Firebase Hosting — Checkout a medium on this here https://jonathans199.medium.com/publish-your-react-app-to-free-firebase-hosting-c4aa38b84a5e
2. Netlify — good article about it here https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/
3. AWS S3 Bucket — which will be covered here

Summary of tasks

1. Create a React App (if you don’t have one already)
2. Create a new AWS S3 bucket
3. Configure S3 bucket to host a Static Website
4. Configure settings and permissions
5. Manually publish React App to S3 then access it with public link
6. Bonus: Create scripts in your React app for CI/CD — Continuous Integration / Continuous Deployment

Let’s get started

Note: The following instructions are for a Mac setup, however, PC should be rather simmillar.

1. Create your React App

• If you don’t already have one you could create it with this command npx create-react-app yourappname
• for more info: (https://reactjs.org/docs/create-a-new-react-app.html)

2. Create S3 Bucket in AWS

If you don’t already have an AWS account, create a FREE AWS account here https://aws.amazon.com/free/

A. Find S3 Service — Once in your AWS account, find the Services icon on the top left-hand corner, or use the search bar and type S3

B. Create an S3 bucket — by clicking on the Create bucket button

C. Name your S3 Bucket — Name the bucket anything you like, however, notice that bucket names are UNIQUE so for my example I’ve called mine testwebapp-js

3. Configure S3 bucket to host a Static Website

A. Enable Static Website Hosting — found under Properties (all the way at the bottom)

Click the Edit

B. Select Host a Static Website and use index.htmlthe Index Document and the Error Document

set index.html for both index document and Error document

4. Configure settings and permissions

A. Disable BLOCK PUBLIC ACCESS permissions

Find Block Public Access under Permissions

B. Give access to the world to read the contents of your S3 bucket
C. Go to your S3 Bucket, under Permissions, and find Bucket Policy

D. Copy and paste the following Bucket Policy —
MUCHO IMPORTANT: use your bucket name in the s3:::yourbucketname/* Resource )

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::testwebapp-js/*"
        }
    ]
}

Paste above Policy JSON but change with your S3 bucket name

4. Manually publish React App to S3 then access it with a public link

A. Create a Production build for your React App — you could use the npm run build or yarn build to create the build folder in your app

D. Now you could upload ONLY the CONTENTS of your build folder into the S3 bucket, manually 🙃 (not your Build folder)

Manually upload the contents of your build folder

E. Then use the public link to access your React App found under Properties all the way at the bottom

Use the public to access your React Web App

But wait we would want to do it Automatically.

6. Bonus: Create scripts in your React app for CI/CD

You will need to download AWS CLI and configure your computer with AWS CLI so that with one command you could upload the contents of the /build folder code to our S3 bucket.

In your terminal go to

// go to your home folder
$ cd
// Home folder 
$ ~ 

A. Install AWS CLI on your computer — Follow these steps to install

$ curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
$ sudo installer -pkg AWSCLIV2.pkg -target /

Further instructions here if needed https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-mac.html

B. Once AWS CLI is installed you could verify if it was installed with
aws --version

C. Configure AWS CLI with aws configure

D. It will ask for AWS Access Key you will get that from your account (go to the IAM service in AWS, find your account, then select security credentials then generate an Access key ) more info here

E. It will ask for a AWS Access Secret Key you will get that from your IAM account step above

F. In the Package.json of your app (in your app) add the following scripts (notice use your bucket name in the s3://yourbucketname command)

"scripts": {
   
   ......all of your old scripts here, just add the next 2 lines
"deploy": "aws s3 sync build/ s3://YOUR_BUCKET_NAME",
"prod": "yarn build && yarn deploy" 
// if using npm
"prod": "npm run build && npm run deploy"
}

The above prod script creates the Build folder from all your React code, then the deploy script grabs that Build folder and syncs it up with your S3 bucket.

G. On your app, run yarn prod or npm run prod then watch your command line, it will make the build folder and will push up the build files to your S3 bucket.

Your Code running

All files from the Build folder on your project

9. Go to your S3 public link found under Properties of our S3 bucket.

then viola!!! our app is running on our S3 bucket with CI/CD setup when we

Notice the URL is the S3 bucket URL

This same process should work also with VUE projects.

If you found this helpful give it a clap 👏, and or if you have any feedback of how it could be improved, please let me know, would love ideas.