How I build Full-Stack Reactjs App using AWS Amplify, GraphQL API

Learning Objective

• This tutorial will walk you through the step-by-step instructions to build your first React application.
• Hosting: Build and host a React application on the AWS.
• Database and Storage.

Prerequisites
To effectively follow along, you will need the following set up;

• React basis
• AWS account
• Github account
• Text-editor, preferably VS Code
• Install Nodejs

The Tutorial Structure
For easy understanding, I will break this tutorial into four sequential order as follow;

Develop React App
Here, we will create a React application and deploy it to the cloud using AWS Amplify’s web hosting service.
A new React application and push it to a GitHub repository. Then, we will connect the repository to AWS Amplify web hosting and deploy it to a globally available content delivery network (CDN). Next, we’ll demonstrate continuous deployment capabilities by making changes to the React application and push a new version to the master branch which will automatically kick off a new deployment.
AWS Amplify provides a Git-based CI/CD workflow for building, deploying, and hosting single page web applications or static sites with serverless backends.
Let's get to work;
1.1) Create a React application
The easiest way to create a React application is by using the command create-react-app. From the Terminal
npx create-react-app awsapp
cd awsapp
npm start
Perhaps, you encountered any issue regarding global installation, first run this command before continue with the above;
npm uninstall -g create-react-app
npx clear-npx-cache
npx create-react-app my-app

1.2) Initialize a GitHub repository
Create a new GitHub repo for your app

Initialize git and push the app to the new GitHub repo using the following commands accordingly in your command line interface:
git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m “initial commit”
git push origin master

1.3) Now, move into AWS Management Console Here
Then type "Amplify" in the search bar and select AWS Amplify to open the service console.

1.4) From the AWS Amplify service console, select "Get Started" under Deploy.

• Then, select GitHub as the repository service and select Continue.
• Follow with authenticate with GitHub and return to the Amplify console.
• Choose the repository and master branch you created earlier, then select Next.
• Accept the default build settings and select Next.
• Review the final details and select Save and Deploy. AWS Amplify will now build your source code and deploy your app at https://...amplifyapp.com.
• Once the build completes, select the thumbnail to see your web app up and running live.
• Once the build completes, select the thumbnail to see your web app up and running live.

1.5) Let's make some changes to the code.
In this step, you will make some changes to the code using your text editor and push the changes to the master branch of your app.

• Edit src/App.js with the code below 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;

• Then run these command to push to Github; git add . git commit -m “changes for v2” git push origin master

We have successfully deployed a React application in the AWS Cloud by integrating with GitHub and using AWS Amplify. With AWS Amplify, you can continuously deploy your application in the cloud and host it on a globally-available CDN.

Next, we will create a local version of the app to continue development and add new features.

1.6) Amplify CLI
The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app, following a simple guided workflow. Let’s go ahead and install the Amplify CLI using the Command Prompt (Windows) or the Terminal (macOS). NOTE: this command can be run in any directory in your Command Prompt/Terminal as the “-g” indicates the binary will be installed globally on your system.
npm install -g @aws-amplify/cli

• Configure Amplify CLI Amazon Identity and Access Management enables you to manage users and user permissions in AWS. The CLI uses IAM to create and manage services programmatically on your behalf via the CLI. amplify configure
• Let's now initialize the Amplify app By deploy a back end and initialize the backend environment locally. In the Amplify console, click on Backend environments and click on click on Get started. Wait for the back end to be deployed.

In the Backend environment tab, click on Open admin UI

Go back to the Amplify Console Backend environments tab and open the Local setup instructions. Copy the command to your clipboard and open the terminal on your computer.

For the remaining and full documentation check

Pls, dont forget to destroy all resources used;
amplify delete

Connect with on LinkedIn