Getting Started with AWS

Build a Full-Stack React Application

Create a simple web application using AWS Amplify

Module 1: Deploy and Host a React App

In this module you will create a React application and deploy it to the cloud using AWS Amplify’s web hosting service.

Introduction

AWS Amplify provides a Git-based CI/CD workflow for building, deploying, and hosting single page web applications or static sites with serverless backends. Upon connecting to a Git repository, Amplify determines the build settings for both the front-end framework and any serverless backend resources configured with the Amplify CLI, and automatically deploys updates with every code commit.

In this module, we’ll begin by creating 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) hosted on an amplifyapp.com domain. 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.

What You Will Learn

  • Create a React application
  • Initialize a GitHub repository
  • Deploy your app with AWS Amplify
  • Implement code changes and redeploy your app

Key Concepts

React application – React is a web application framework that enables developers to quickly build performant single page applications using JavaScript.

Git – A version control system that allows developers to store files as well as maintain and update relationships between files and directories, versions, and changes to the files.

 Time to Complete

10 minutes

 Services Used

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)

    Front End GitHub Repository Module 1

    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.

    Front End AWS Console Find Amplify Module 1
  • 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.

    Front End Amplify Deploy Module 1

    b. Select GitHub as the repository service and select Continue.

    Front End Amplify GitHub Module 1.png

    c. Authenticate with GitHub and return to the Amplify console. Choose the repository and master branch you created earlier, then select Next.

    Front End GitHub Add Repository Module 1.png

    d. Accept the default build settings and select Next.

    Front End GitHub Add Repository2 Module 1.png

    e. Review the final details and select Save and Deploy.

    Front End GitHub Add Repository3 Module 1.png

    f. AWS Amplify will now build your source code and deploy your app at https://...amplifyapp.com.

    Front End Amplify Deploy Source Module 1

    g. Once the build completes, select the thumbnail to see your web app up and running live. 

    Front End Initial App Module 1
  • 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.

    Front End HelloV2 App Module 1

Conclusion

You have 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.

Was this module helpful?

Thank you
Please let us know what you liked.
Close
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.
Close

Initialize Local App