Skip to main content

Getting Started Resource Center

Deploy a Web App on AWS Amplify

Task 1: Create a new Amplify Project

In this task, you will create a new web application and configure Amplify.

Introduction

Overview

In this task, you will create a new web application using React, a JavaScript library for building user interfaces, and learn how to configure AWS Amplify for your first project.

What you will accomplish

  • Create a new web application

  • Set up Amplify on your project

Implementation

5 minutes

Troubleshooting Amplify

1. Check environment

In a new terminal window or command line, run the following commands to verify that you are running at least Node.js version 18.16.0 and npm version 6.14.4 or greater.

  • If you are not running these versions, visit the nodejs and npm website for more information.

Note: Your output may differ based on the version installed.

node -v
npm -v
Missing alt text value

2. Create a new React application

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

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

3. Open the local development server

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

Missing alt text value

4. Install Amplify CLI

Open a new terminal window, navigate to your projects root folder (expensetracker), and run the following command:

npm create amplify@latest -y
Missing alt text value

Note: What Amplify creates

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

Missing alt text value

Conclusion

In this task, you learned how to create a React frontend application, and installed the amplify packages in preparation to configure a backend for the app.  

Initialize the Amplify Backend

Start Task Two