no

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 a...

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.

Related

devops 8555728793927506897

Post a Comment Default Comments

item