Deploy React App using AWS Amplify in 2022

AWS Amplify has accurate custom-built features and tools that allow mobile developers and frontend developers effortlessly create full-stack applications on AWS(Amazon Web Services). Through Amplify, you can conduct configuration for a mobile app or web backend, link your app in just a few minutes, create a web frontend UI visually, and administer app content externally in the AWS console.

AWS Amplify offers a Git-based CI/CD functionality for designing, deploying, and hosting single-page web applications or static websites with backend as a service. When linking with a Git repository, Amplify identifies the build settings for the front-end framework and any sort of serverless backend resources in configuration with the Amplify CLI and sets up updates with each CodeCommit automatically.

In this blog I will guide you to Deploy React App using AWS Amplify, we will initiate by developing a new React application and make it reach a GitHub repository. After that, we will link the repository to AWS Amplify web hosting and deploy it to an internationally accessible content delivery network (CDN) with its host on an amplifyapp.com domain. Following that, we will exhibit persistent deployment abilities through modifications in the React application and move the novel version to the master branch which will outset a new deployment automatically.

Important terms:

React application

React is a web application framework that facilitates developers to design single-page apps using Javascript and aids in the generation of reusable UI components. You can design sophisticated views for every state of your app.

Git

A version control system that enables developers to easily store files and uphold and upgrade associations between directories and files, versions, and any changes in the files. It manages small to huge projects precisely.

What you will get to know?

· Generate a React application · GitHub repository initialization · Deploy React App using AWS Amplify · Execute code changes and redeploys React app

1. Generate a new React Application

The simplest way to develop a React application is through the command create-react-app. Install this by typing the following command in your Terminal or Command prompt: npx create-react-app amplifyapp cd amplifyapp npm start

2. GitHub repository initialization

In the second step, you will form a GitHub repository and commit your code to the repository. You must have a GitHub account to carry out this step. If you don't own an account, sign it up. a. Develop a new GitHub repository for your app b. Commence git and move the application to the novel GitHub repo by implementing the subsequent commands in the command-line interface: Javascript: · git init · git remote add origin git@github.com:username/reponame.git · git add. · git commit -m “initial commit” · git push origin master

3. Log on to AWS Management Console

Search the AWS Management Console on your browser and open it to refer to the step-by-guide simultaneously. When the browser loads, insert your user name and password to begin. After that, type "Amplify" in the search box and choose AWS Amplify to open the service console.

4. Deploy React App using AWS Amplify

Now, you will link the GitHub repository created in the second step to the AWS Amplify service. This will allow you to build, deploy, and host your App on Amazon Web Services. a. Tap "Get Started" under Deploy in the AWS Amplify service console. b. Choose GitHub as the repository service and tap Continue. c. Substantiate with GitHub and come back to the Amplify console. Select the master branch and repository that you generated and hit Next. d. Accept all the default build settings and enter Next. e. Assess the final aspects and choose to Save and Deploy. f. AWS Amplify will formulate your source code and will do app deployment at ...amplifyapp.com. g. After the build is completed, pick the thumbnail for your app.

5. Execute code changes automatically and redeploy React app

In the fifth step, you will do a few changes in the code using a text editor and move the changes to the master branch of the app.

a. Edit src/App.js with the below-mentioned code and save.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello from V2</h1>
      </header>
    </div>
  );
}

export default App;

b. Make the changes to GitHub in the Terminal (macOS) and Prompt (Windows) to make way for a new build automatically.

git add. git commit -m “changes for v2” git push origin master c. After the build is done, choose the thumbnail on the AWS Amplify console to review your updated application.

Conclusion

You learnt how to conduct deployment of a React application in the AWS cloud through integration with GitHub and utilizing AWS Amplify. You can constantly deploy your application in the cloud and host it on internationally accessible CDN with AWS Amplify using the above-mentioned steps.

visit braincuber.com