Publish a React website on AWS with AWS amplify and AWS CloudFront w

Publishing a React website on AWS with AWS amplify and AWS CloudFront with Custom Domain (Part 1)

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.

In this guide, we’ll give you a straightforward solution where visitors can input their names to get a greeting. The project files will be hosted in an S3 bucket by AWS Amplify, and a custom domain will be made available for website access via AWS CloudFront.

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 versionv12.18.3 (check via node —-version)
NPM version6.14.6 (check via npm —-version)
React version17.0.1
Text Editor / IDEVisual 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:

$  npx create-react-app react-amplify-cloudfront

Conclusion


The internet is vital in today’s digital age, and websites are a great way to interact with people. React makes website creation easier, but it can be difficult to implement on a dependable and affordable service. Using AWS Amplify and AWS CloudFront, this guide offers a step-by-step method for publishing a React website on AWS while guaranteeing scalability, security, and speed.

AWS provides the features required for React project deployment to be simple. This two-part tutorial covers the creation of the React project, its deployment using AWS Amplify, and the configuration of AWS CloudFront and custom domain.

AWS Amplify is an effective tool that makes it easier to integrate AWS services when deploying front-end applications. With AWS CloudFront, you can be sure that your content will be delivered to users worldwide with the least amount of latency possible.

This guide is meant for developers who have a basic understanding of AWS and React; it assumes you are familiar with AWS terminology, state management, routing, and React components. Make sure you have a compatible development environment and access to an AWS account.

 

Picture of Asif Imtiaj Safi

Asif Imtiaj Safi

Software Development Engineer

Hire Exceptional Developers Quickly

Share this blog on

Hire Your Software Development Team

Let us help you pull out your hassle recruiting potential software engineers and get the ultimate result exceeding your needs.

Contact Us Directly

Address:

Plot # 272, Lane # 3 (Eastern Road) DOHS Baridhara, Dhaka 1206

Talk to Us
Scroll to Top