Full-Stack Note App CI/CD Deployment on AWS Amplify Part-1

Overview

Source : Unsplash

What 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
Source: www.google.com

Module 1: Deploy and Host a React App

Implementation Steps

npx create-react-app amplifyapp 
cd amplifyapp
npm start
git init 
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m “initial commit”
git push origin master
Output Image React App
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;
git add .
git commit -m “changes for v2”
git push origin master

Module 2: Initialize a Local Amplify App

npm install -g @aws-amplify/cli
amplify configure
? 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? Y

Conclusion

amplify console

References

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hemant Jain

Sr. SRE at Oracle, Ex-PayPal, Ex-RedHat. Professional Graduate Student interested in Cloud Computing and Advanced Big Data Processing and Optimization.