How to deploy a React application to AWS using AWS S3 & AWS CloudFront
Tags: aws, webdev, simple, react
Published: 2023-07-09 00:26:05

Hello everyone! I hope that you are doing great on this fine weekend😀

Previously, I built a face recognition tool for celebrities where I deployed its back-end to AWS using AWS CDK.

The link for the article can be found here: https://dev.to/alizgheib/build-a-face-recognition-tool-for-celebrities-using-react-aws-foo

Today, I'll be deploying the front-end part (React application) to Amazon Simple Storage Service (S3) while adding a caching solution using AWS CloudFront - So let's do it together!

I thought that it would be pretty useful to outline our process into steps so that it would be easier for you to follow along.

**Build/Deployment Outline:**

 - Fix a common issue with React applications (blank page)
 - Create a production build
 - Create an S3 Bucket on AWS and upload the content of the build 
   folder
 - Create a CloudFront distribution
 - Enabled S3 public access to our bucket and allow access from 
   our CloudFront distribution only (using OAC)
 - That should be it! Our application should be running now and 
   available on over 400+ edge locations

**Step By Step Guide:**

If you would like to follow along, feel free to use the codebase available here: https://github.com/AliZgheib/celebrities-face-recognition/tree/main/front-end

Now let's start:

First of all, there's a small issue that I faced when accessing the deployed application (a blank page kept on showing)
To fix that, we just need to add `` "homepage": "." `` in the ``package.json`` file. 

the ``package.json`` should look as follow:

```
{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    // project dependencies here
  },
  // other configurations
}
``` 
Now let's create a production build of the application

We cd into the project directory

```
cd front-end
```

We create a production build by running the NPM command below:

```
npm run build
```

After a successful run we should have a build folder similar to the one below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbpx9k7r7axguhlw4ymw.PNG)

Now let's login to the AWS Console and Navigate to the AWS S3 service page.

We click on the "Create bucket" button to create an S3 bucket that will host our React application code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4f99d23vannocho8yuf.PNG)

We name our s3 bucket (ex: ``celebrities-face-recognition`` - it should be globally unique) and we click the "Create bucket" button at the bottom without the need to modify any other options.

We should see something similar to the image below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn0mbhxr18l64ueb5sxt.PNG)
Now let's upload the previously created production build to the S3 bucket.

We click on ``celebrities-face-recognition`` (the name of the bucket you created) and we click on “Upload”.

We upload the files (``index.html``, ``favicon.ico``, ``asset-manifest.json``, ``robots.txt``) and the ``static`` folder separately and at the end, we should have something similar to the list below ready to be uploaded:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y7xi8sexityqphkfqf2.PNG)

Now we click the "Upload" button at the bottom of the page and after waiting a couple of moments, our project should be successfully uploaded.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r8rssrngx6d6dr7bo58.PNG)

Great progress if you are still following along!

The setup for our S3 bucket is partially ready. We have to add a caching solution to our S3 bucket and expose our website to the web (via AWS CloudFront) and finally, we go back to S3 to update the permissions.

Let's navigate to the AWS CloudFront service and click on the "Create a CloudFront distribution" button to create a new distribution.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn40mfkvj5l958bjtpmc.PNG)

1- We pick ``celebrities-face-recognition.s3.us-east-1.amazonaws.com`` for the Origin domain option

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytxoyrjq88hosb9u5pyl.PNG)

2- Now for the Origin access option:

2.a- Let's change it from "Public" to "Origin access control settings (recommended)" - OAC is the newer and recommended approach to access your S3 bucket from AWS CloudFront.

2. b- Click "Create control setting"

2. c- Click "Create"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0krdxriszd5zmyqm180g.PNG)

3- For the WAF option: pick whatever fits your needs. For my case, I'll go ahead and disable it

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3paz6scby8le6ywjrc33.PNG)
 
4- For the Default root object, we enter "index.html" as our 
   default object

5- We click "Create distribution" to create our distribution.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gq1waoss63qjnzhxbukk.PNG)

that's it for CloudFront, our distribution is now being deployed globally and you should see a screen similar to the one below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4ekkvixboxshribsha8.PNG)

You can see the distribution domain name: https://d3b1yxs153bxzh.cloudfront.net 

However, if we try to access it, we will get an error because S3 is not allowing our CloudFront distribution to access it - let's change that!

Let's copy the new S3 bucket policy by clicking the "Copy Policy" button at the top right of the screen.

We navigate back to the AWS S3 service and we open the "permissions" section of our ``celebrities-face-recognition`` bucket.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v7njatpsoezzqdk4rgm.PNG)

1- Click the "Edit" button in the "Block public access (bucket settings)" section and make sure to untick all the options then click "Save changes".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1it0obfj1fvvzpjo2vty.PNG)

2- Click the "Edit" button in the "Bucket policy" section and paste the previously copied CloudFront permissions here then click "Save changes".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j22mbtk8xcx96i8pv68j.PNG)

Guess what? The distribution is working now 😀 and can be accessed globally at minimal latency - https://d3b1yxs153bxzh.cloudfront.net.

You can go a bit further and link the distribution URL to your domain (ex: https://www.example.com) using a DNS provider like GoDaddy, Name Cheap, Route 53, etc.. but that would be outside the scope of this article.

Please note that the distribution created is for education purposes only and it will be taken down before publishing the article. Use it as a guide to create and publish your distributions.

Thank you for sticking with me till the end and I would appreciate any feedback in the comments section below.