React Project Continuous Deployment With Aws Amplify

1. Introduction

AWS Amplify is one of my platforms of choice when developing a frontend application when I need a secure build and deploy and a scaleable architecture as well.

In this blog, I will explain the process of how to deploy a React project on the cloud using AWS Amplify.

1.1 Prerequisites

1. NPM
2. AWS Account
3. Visual Studio Code

2. Installing AWS Amplify Framework Locally

     npm install -g @aws-amplify/cli
     amplify configure
     

3. Creating a React Project

Open your terminal, go to where you want to create a React project, and execute the following command:

	npx create-react-app react-amplify
    

4. Amplify the React Project

Inside the newly created React project, execute the following commands in a terminal.

amplify init
npm install aws-amplify @aws-amplify/ui-react

Copy these lines in your index.js.

import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

5. Add Authentication

amplify add auth

6. Deploy in AWS Amplify

amplify push

Open Amplify Console

amplify console

Open src/App.js and do the following modification

Import React components

import { withAuthenticator } from '@aws-amplify/ui-react'

Use the HOC to wrap App component.

export default withAuthenticator(App)

Run your React project locally by executing

npm start

7. Make the React Project Publicly Available

7.1 Add hosting

amplify add hosting

7.2 Publish

amplify publish

You should be able to access your React project deployed on AWS Amplify.

References

• https://www.czetsuyatech.com/2020/09/continuous-integration-continuous-deployment.html
• https://aws.amazon.com/amplify/