Deploy a Web App on AWS Amplify

Tutorial

Introduction
Create Amplify Project
Initialize the Backend
Build the Frontend
Deploy the App
Clean up Resources

Task 1: Create a new Amplify Project

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

Introduction

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

 Time to Complete

5 minutes

 Requires

 Get help

Troubleshooting Amplify

Implementation

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

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

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

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

    npm create amplify@latest -y

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

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.  

Start Task Two

Initialize the Amplify Backend

Was this page helpful?

 Feedback