In the modern world, we are very much dependent on the internet. And one of the best ways to reach a person is via a website. It’s very easy to build websites using React.

But most of the time, people find it hard to deploy the website on a reliable service where there is almost zero downtime and which is very cost-effective. Here we’re sharing Step-by-step publishing guide for a React website on AWS with AWS amplify and AWS CloudFront ensure security, speed, and scalability.

AWS can provide us those features. Anyone can deploy any react project on AWS and publish a website by following very simple steps.

Let’s dive into it!

I have divided this blog into 2 parts. Part 1 covers the React project creation and AWS Amplify and Part 2 covers the CloudFront configuration and custom domain setup. You can check out part 2 to know more about CloudFront configuration and custom domain setup.

AWS Amplify

AWS amplify is mainly a set of features that can be used to deploy any front-end based application or projects on AWS. It’s easy and convenient to use and it has all the features integrated into it that will help you to implement different AWS services into your application and grow your project over time. To find out more about it, check out their official website.

AWS CloudFront

AWS CloudFront is a CDN (content delivery network) service that helps you to deliver your content that is data, video, image, etc to all the corners of the world with the lowest latency. In simple words, it’s a path between AWS content and the open wide world. To learn more, visit the AWS CloudFront webpage.

Before You Begin 👀…

This post is prepared for developers who are beyond the beginner stage and possess a foundational understanding of React development and AWS services. It assumes that you are comfortable with the basics of creating and managing React applications, including setting up components, managing state, and handling routing. If you’re new to React, it’s advisable to familiarize yourself with these concepts through introductory tutorials or courses before attempting to deploy a React application using AWS services.

Similarly, this guide is not designed as a comprehensive introduction to AWS Amplify or AWS CloudFront. Rather, it focuses on practical deployment strategies and configurations specific to hosting a React website on AWS infrastructure. You should have a basic familiarity with AWS terminology and concepts such as S3 (Simple Storage Service) buckets, CloudFront distributions, IAM (Identity and Access Management) roles, and DNS management.

To proceed with this tutorial effectively, ensure you have access to an AWS account or permissions within an existing account. This is necessary to create and manage the AWS resources required for hosting your React application securely and efficiently. You will also need AWS Amplify credentials to facilitate deployment from your local development environment to AWS services via the AWS Management Console.

Requirements

Here are the environments that are used when creating the post. You can match them if you want. But it’s not mandatory.

Node Js version: v12.18.3 (check via node —-version)
NPM version: 6.14.6 (check via npm —-version)
React version: 17.0.1
Text Editor / IDE: Visual Studio Code
CLI: Git Bash

Source Code

You can get all the codes used in this project in this GitHub Repository.

Project Introduction

We will be creating a simple website where a user will find an input box and when the user enters his/her name in it, it will show a welcome message to the user.

We will use AWS Amplify to push/publish the website on AWS where the AWS S3 bucket will be used to hold the React project files. The bucket will be public so that it can be used as hosting storage for the website. After that, we will use AWS CloudFront to add a domain layer so that we don’t have to use the S3 bucket domain name to see the website. Finally, we will add a Custom domain in the CloudFront which will show users the website content whenever the custom domain is called.

As there is a lot to cover, this post is divided into two parts. In the first part, we will create the React project and publish it on AWS. And on the second one, we will configure the CloudFront to access the website with a custom domain.

Let’s start to make our hands dirty 😉…

Creating a React Project

We will start off by creating a new React project which we will publish later. To create a React project, go to your desired folder, and then open any CLI and run: