May 5, 2021
Full-Stack Note App CI/CD Deployment on AWS Amplify Part-1
Overview
In this tutorial, you will create a simple full-stack web application using AWS Amplify, a set of tools and services including a web hosting service. In the first module, you’ll build and host a React application on AWS.
Through the remaining 4 modules, you will initialize a local app using the CLI, add authentication, add a GraphQL API and database, and update your app to store images.
What You Will Learn
This tutorial will walk you through the steps to create a simple web application discussed above. You will learn:
- Hosting: Build and host a React application on the AWS Global content delivery network (CDN)
- Authentication: Add auth to your app to enable sign-in and sign-out
- Database and Storage: Add a GraphQL API, database, and storage solution
Module 1: Deploy and Host a React App
Implementation Steps
1.Create a new React based Application
The easiest way to create a React application is by using the command create-react-app. Install this package using the following command in your Command Prompt or Terminal:
npx create-react-app amplifyapp
cd amplifyapp
npm start2. Initialize Git Repo:
a. Create a new GitHub repo for your app (link)
b. Initialize git and push the application to the new GitHub repo executing the following commands 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 master3. Login into AWS Management Console
Open the AWS Management Console in a new browser window, so you can keep this step-by-step guide open. When the screen loads, enter your user name and password to get started. Then type “Amplify” in the search bar and select AWS Amplify to open the service console.
4. Deploy your App with AWS Amplify
In this step, you will connect the GitHub repository you just created to the AWS Amplify service. This will enable you to build, deploy, and host your app on AWS.
a. In the AWS Amplify service console, select “Get Started” under Deploy.
b. Select GitHub as the repository service and select Continue.
c. Authenticate with GitHub and return to the Amplify console. Choose the repository and master branch you created earlier, then select Next.
d. Accept the default build settings and select Next.
e. Review the final details and select Save and Deploy.
f. AWS Amplify will now build your source code and deploy your app at https://...amplifyapp.com.
g. Once the build completes, select the thumbnail to see your web app up and running live.
5. Automatically Deploy the Code Commit Changes
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.
a. 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;
b. Push the changes to GitHub in the Command Prompt (Windows) or Terminal (macOS) to automatically kick off a new build:
git add .
git commit -m “changes for v2”
git push origin masterc. Once the build is complete, select the thumbnail on the AWS Amplify console to view your updated app.
Module 2: Initialize a Local Amplify App
In this module you will install the Amplify CLI and initialize the Amplify project using the CLI.
1.Install the Amplify
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/cli2. Configure the Amplify
Amazon IAM (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.
To configure the CLI, run the configure command. To see a video walkthrough of the CLI configuration process, click here.
amplify configure3. Initialize the Amplify App
Next, we will deploy a back end and initialize the backend environment locally.
a. In the Amplify console, click on Backend environments and click on click on Get started. Wait for the back end to be deployed.
b. In the Backend environment tab, click on Open admin UI
c. 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.
d. Paste the command into your terminal and follow the setup instructions.
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you plan on modifying this backend? YConclusion
You have initialized the Amplify project and are now ready to start adding features! We’ll add an entire user authentication flow with just a few lines of code in the next module.
To view your Amplify project in the dashboard at any time you can now run the following command:
amplify console
