Unleash the Potential of Your React JS App: Effortlessly Deploy with AWS CloudFront CDN

I am writing this blog to explain how to set up a react application on the cloud front (CDN) using the s3 bucket.

Checklist…

Check the version of Node JS & NPM
React CLI Tool to build fresh react application — https://create-react-app.dev/docs/getting-started
Setup S3 bucket on AWS & upload build
Create a certificate from the AWS Certificate Manager and update the DNS record
Create distribution (CDN) on AWS
Update DNS record to add an alias for distribution on Route 53
Demo

1. Check the version of Node JS & NPM

If Node JS is not installed in your development machine then you can download it from here: https://nodejs.org/en/

You can use “nvm” ( node version manager ) to upgrade/downgrade the Node JS version easily, For more information please visit: https://github.com/nvm-sh/nvm/blob/master/README.md

2. React CLI Tool to build fresh react application

Refer to this document and build your fresh react application using npx create-react-app my-app command,

If you’ve previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that “npx” always uses the latest version.

Goto the project directory and run command: cd my-app && yarn start

The demo application will look like this

Once your react application will run successfully you can run a yarn run build command to generate a build

3. Setup S3 bucket on AWS & upload build

Log in with your AWS credentials
Goto the S3 service
Click on the “Create bucket” button
Set a bucket name and other configurations if required
Click on the “Create bucket” button at the bottom of the form
Upload all the files and folders from the “build” directory of your project

If you click on the index.html file you will get an object URL like “https://demo-aws-s3-cdn.s3.ap-south-1.amazonaws.com/index.html”, but if you open it on your browser it won’t work the reason is our bucket is not publically accessible

Error — As our bucket is not publically accessible

4. Create a certificate from the AWS Certificate Manager and update the DNS record

You can review this document to get a detailed understanding of AWS Certificate Manager,

Steps…

Change the region from the top bar and select “US East (N. Virginia)”
Click on the “Request a certificate” button
Write “Fully qualified domain name”
Click on the “Request” button

Request public certificate page will look like this

Go to the detail page of your requested certificate from the “Certificates” and create a record in “Route 53”

After some time status will be changed from “Pending verification” to “Issued”
Now you can use this certificate in cloud front distribution

5. Create distribution (CDN) on AWS

Goto the Cloud Front service
Click on the “Create Distribution” button
Choose “Origin domain”
Select “Yes use OAI (bucket can restrict access to only CloudFront)”
Select “Yes, update the bucket policy”
Choose “Custom SSL certificate — optional”, The certificate which you created using AWS Certificate Manager
“/index.html” will be the default root object — optional

Once your distribution is enabled and deployed the last step is to create an alias of CDN in “Route 53”

6. Update DNS record to add an alias for distribution on Route 53

Goto the Route 53 service
Click on the “Create Record” button
Choose “Simple Routing” from the route policy
Click on the “Next” and Define the simple record as below

https://demo.internetofweb.com will work for you but if you still face any issues with this URL then you can check the Object Ownership and select “ACLs enabled”