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. AWS can provide us those features. Anyone can deploy any react project on AWS and publish a website by following very simple steps. So let’s get started 😄…

Part 1 covers the React project creation and AWS Amplify part.

Part 2 covers the CloudFront configuration and custom domain setup part.

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 not for those who are absolutely beginner. This is not a React teaching post. This post will assume that you already know how to create React projects and have a basic understanding of it. Also, it’s not an AWS basic tutorial either. It will not teach you how AWS amplify works or how CloudFront works. But it will show you the minimum configurations and steps you need to follow the process and publish a React website with a custom domain. As this post uses AWS, we will assume that you already have an AWS account or have access to an account, as you will need to use your credentials for AWS Amplify and will need to go to AWS console and configure AWS CloudFront. If you still think this post can help you, then let’s get into it.

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 S3bucket 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

This will create a new folder called react-amplify-cloudfront in the working directory. Open that directory in any text editor or IDE of your choice. As mentioned before, we will be using Visual Studio Code as the IDE. If you are doing so as well, you can write the following in the CLI to open it in VS Code.

$  cd react-amplify-cloudfront && code .

There you will find something like this:

Let’s run npm start on the present directory. This will open up a browser window and you will see the default React home page.

Now, we will replace the App.js file with the following code snippet.

import "./App.css";

import { useState } from "react";

function App() {
  const [username, setUsername] = useState("");

  const handleChange = (event) => {
    setUsername(event.target.value);
  };

  return (
    <div className="App">
      <header className="App-header">
        <p>
          <form>
            <label>
              <span>Name: </span>
              <input
                type="text"
                value={username}
                onChange={handleChange}
                name="name"
                className="Name-input"
              />
            </label>
          </form>
        </p>
        <p>
          Hello 👋{" "}
          <b>
            <i>{username}</i>
          </b>{" "}
          ! Welcome 😎 !!
        </p>
        <p>Hope you have found the post very useful! 😊</p>
        <br />
        <a
          className="App-link"
          href="https://medium.com/@asifimtiazshaafi"
          target="_blank"
          rel="noopener noreferrer"
        >
          More Medium posts
        </a>
      </header>
    </div>
  );
}

export default App;

And also, we will replace the content of App.css file with the following as well.

.App {	
  text-align: center;	
}	

.App-logo {	
  height: 40vmin;	
  pointer-events: none;	
}	

@media (prefers-reduced-motion: no-preference) {	
  .App-logo {	
    animation: App-logo-spin infinite 20s linear;	
  }	
}	

.App-header {	
  background-color: #282c34;	
  min-height: 100vh;	
  display: flex;	
  flex-direction: column;	
  align-items: center;	
  justify-content: center;	
  font-size: calc(10px + 2vmin);	
  color: white;	
}	

.App-link {	
  color: #61dafb;	
}	

@keyframes App-logo-spin {	
  from {	
    transform: rotate(0deg);	
  }	
  to {	
    transform: rotate(360deg);	
  }	
}	
.Name-input {	
  width: 100%;	
  height: 56px;	
  border-radius: 4px;	
  position: relative;	
  text-align: center;	
  background-color: rgba(255,255,255,0.3);	
  transition: 0.3s all;	
}	
.Name-input:hover {	
  background-color: rgba(255, 255, 255, 0.45);	
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);	
} 

If you do everything right, you will be able to see this screen on your browser:

Perfect!! 🥳😎 We can now move to AWS Amplify 😀…

Setting up AWS Credentials

Before adding AWS Amplify into the project, we first need to set the AWS user credentials into the system. You can find how to set up the basic AWS user credentials here.

Install AWS Amplify

First, we need to install the AWS Amplify into our system. We will use Node to install the AWS Amplify CLI NPM package. To install it globally, run:

$  npm i -g @aws-amplify/cli

With this, we can use the amplify command anywhere.

Update: I forgot to add the -g tag when installing the aws-amplify/cli library. Thanks to Ophir Tal for helping me to find this error.

To check if it’s installed successfully, run:
amplify —-version . This should return the installed version name.

Initialize the Project with AWS Amplify

Now, we need to initialize the React project to work with AWS Amplify. To do that, open a CLI in the project directory, and run:

$  amplify init

This will start the process and ask for some information.

• First, it will ask for the project name which will be used for the AWS Amplify process. This project name should be between 3 and 20 characters and alphanumeric.
• Then will ask about the environment. The environment name is dev by default, and we will keep that one.
• Select the IDE you are using in the next step.
• The application type is javascript in our case, as we are using React.
• The framework is React (in case you are wondering…😜 )
• Finally, just press enter for the last few steps. (That’s easy enough, right?🤔 )

After everything is done, the AWS Amplify will create and configure all the necessary things to publish the React project on the AWS S3 bucket.

At the end of the process, you will find some useful commands as well.

Publish using AWS Amplify

Now that the project has been initialized with AWS Amplify, we can use it to publish the project on AWS S3. But before that, we need to tell amplify that we want to publish the project for hosting. Otherwise, it will not upload the files on the S3 bucket.

To add the hosting configuration on AWS amplify, run:

$  amplify add hosting

Just as amplify initialization, this command will take you through some configuration questions. Let’s walk through them.

• First, it will ask you for the plugin module to execute. As said before, we will be using the AWS S3 and CloudFront for the hosting and domain setup, we will select that one. So select: Amazon CloudFront and S3.
• Second, it will ask for the environment, and for this one, we will select dev. We don’t need the prod (which will configure the CloudFront as well) right now, as we will set up the CloudFront later ourselves.
• You can just select the default values for the rest of the config and press Enter for each one.

And we are done with it. Now the only thing remaining is to publish the added category on AWS.

To publish the newly added hosting category and upload the files on the AWS S3 bucket, just run in the CLI:

$  amplify publish

It will ask you to confirm all the configs, just press enter to continue.

This may take several minutes depending on your internet connection speed. But when it’s published and uploaded successfully, it will open up a window in your browser and you will find the React website up and running!

🥳 That it!! 🥳 We have uploaded the React project on AWS and we can use the URL to view the project from any browser! 🌟

That’s all for now. Hope this post has helped you to understand how to use AWS Amplify to publish React project on AWS. In part 2, we will set up the AWS CloudFront to use Custom Domain to access the published website. Till then be safe and keep coding!! 👨‍💻