Implementation

• Create a new React 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 start

• Initialize GitHub repository

  In this step, you will create a GitHub repository and commit your code to the repository. You will need a GitHub account to complete this step – if you do not have an account, sign up here.

  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 master

• Log 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.
  

  

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

  

• Automatically deploy code 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 master

  c. Once the build is complete, select the thumbnail on the AWS Amplify console to view your updated app.