Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

Skip to main content

Getting Started Resource Center

Build a Basic Web Application

Task 1: Create a Web App

TUTORIAL

Introduction

Overview

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

In this task, you will start by creating a new React application and pushing it to a GitHub repository. You will then 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. 

Key concepts

React Application: React is a JavaScript library that enables developers to quickly build performant single-page applications.

Git: Git is a version control system that allows developers to store files, maintain and update relationships between files and directories, and track versions and changes to the files.

Implementation

Create a new React application

1. Create the app

In a new terminal or command line window, run the following command to use Vite to create a React application:

npm create vite@latest profilesapp -- --template react
cd profilesapp
npm install
npm run dev
Missing alt text value

2. View the app

In the terminal window, select and open the Local link to view the Vite + React application.

Missing alt text value

Install the Amplify packages

1. Open GitHub

Sign in to GitHub at https://github.com/.

Missing alt text value

2. Start repository

In the Start a new repository section, make the following selections:

  • For Repository name, enter profilesapp, and choose the Public radio button.

  • Then select, Create a new repository.

Missing alt text value

3. Push the app to GitHub

Open a new terminal window, navigate to your projects root folder (profilesapp), and run the following commands to initialize a git and push of the application to the new GitHub repo:

Note: Replace the SSH GitHub URL in the command with your GitHub URL.  

git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:<your-username>/profilesapp.git 
git branch -M main
git push -u origin main
Missing alt text value

Initialize a GitHub repository

1. Create an Amplify project

Open a new terminal window, navigate to your app's root folder (profilesapp), and run the following command: 

npm create amplify@latest -y
Missing alt text value

2. View the project directory

Running the previous command will scaffold a lightweight Amplify project in the app’s directory.

File directory view showing a "profilesapp" folder with subfolders "amplify," "auth," and "data," containing TypeScript files and configuration files.

3. Push the changes to the repository

In your terminal window, run the following command to push the changes to GitHub:

git add .
git commit -m 'installing amplify'
git push origin main
Missing alt text value

Deploy your app with AWS Amplify

In this step, you will connect the GitHub repository you just created to AWS Amplify. This will enable you to build and deploy your app on AWS.

1. Create a new Amplify app

Sign in to the AWS Management console in a new browser window, and open the AWS Amplify console at https://console.aws.amazon.com/amplify/apps.

Choose Create new app.

Missing alt text value

2. Choose GitHub as your Git provider

On the Start building with Amplify page, for Deploy your app, select GitHub, and select Next.

Missing alt text value

3. Add repository and branch

When prompted, authenticate with GitHub. You will be automatically redirected back to the Amplify console. Choose the repository and main branch you created earlier. Then select Next.

Missing alt text value

4. Review build settings

Leave the default build settings, and select Next.

Missing alt text value

5. Deploy the app

Review the inputs selected, and choose Save and deploy.

Missing alt text value

6. Monitor build status

AWS Amplify will now build your source code and deploy your app at https://...amplifyapp.com, and on every git push your deployment instance will update. 

It may take up to 5 minutes to deploy your app.

Missing alt text value

7. View the deployed app

Once the build completes, select the Visit deployed URL button to see your web app up and running live. 

Missing alt text value

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.

Task 2

Build a Serverless Function

Start Task Two