Build and hosting a React website using AWS Amplify

4 min readMar 6, 2021

--

Here you are going to learn how to initialize, configure, deploy and host an AWS Amplify Console, served via Amazon CloudFront to host static resources for your web application.

Architecture Overview

Prerequisites

Before we begin, make sure you have the following installed:

Node.js v10.x or later
npm v5.x or later
git v2.14.1 or later

Start & Configure Amplify Project

Install amplify CLI

npm install -g @aws-amplify/cli

Now create your react app:

npx create-react-app react-amplified --use-npm

Move to your root folder (react-amplified) and start your application:

npm start

You can see the running app by navigating to http://localhost:3000.

React app locally running locally 🙌

Current project structure:

Project structure after install react project

Now let’s set up the amplify. In root folder run:

amplify init? Enter a name for the project reactamplified
? Enter a name for the environment dev 
? Choose your default editor: Visual Studio Code
? Choose the type of app that you’re building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm build 
? Start Command: npm start
Using default provider awscloudformation

This will create a new AWS Amplify app, the necessary roles, and the S3 bucket. Everything that you need without worry about anything.

From project structure:

It creates a file called aws-exports.js in the src directory. This file contains the configuration for your backend, backend created by Amplify.
Some files were added to .gitignore;
It creates a folder called amplifywith your backend definition. It contains the CloudFormation file and so.

You have created and configured a React APP using Amplify.

Deploy & Host App

Well first of all you should send it to your repository. I am going to use code commit (why not), but you can use github too or another provider.

(if you need help to configure AWS CLI check this article)

Create a CodeCommit repository

aws codecommit create-repository — repository-name react-amplify

Initialize a new git repository:

git init

Add the files to your new local repository. This stages them for the first commit.

git add .

Commit the files that you’ve staged in your local repository.

git commit -m 'First commit'

Copy remote repository URL field from your CodeCommit repository

In Terminal, add the URL for the remote repository where your local repository will be pushed.

git remote add origin <remote repository URL>

Push the code to your new CodeCommit repository

git push -u origin master

To interact with CodeCommit you need AWS CodeCommit credentials. To generate your credentials go to:

My security credentials;
AWS Code Commit credentials;
HTTPS Git credentials for AWS CodeCommit;
Generate credentials;

Now you have your code in the CodeCommit repository! 👌

Connect Amplify with Repository

Go to Amplify service and connect to AWS CodeCommit

Select your repository and branch:

Configure build settings:

select dev environment and create a role so Amplify Console may access your resources.

Next and then deploy.
Click Run Build

Click on the link:

You have successfully configured AWS Amplify

To finish let’s test something

Go to App.js and change the phrase “Learn React” to “Learn React2”;

git add .
git commit -m "test commit"
git push

Check amplify Application :

your changes are being deployed automatically

This project can be accessed in my Github account.

Conclusion

In this article, you learned what is amplify and how to create, configure and deploy an Amplify project. If you would like to see more capabilities of Amplify, please stay tuned for the next articles of this series.

What is missing?

Create a backend (API + Authentication);
Connect frontend with backend;
Explore some features from Amplify;

Please stay tuned for the next articles of this series.