Build a Full Stack React Application

TUTORIAL

Introduction

Deploy and Host React App

Initialize local app

Add authentication

Clean up Resources

Introduction: Build a Full Stack React Application

Follow step-by-step instructions to create a simple full-stack web application

Overview

In this tutorial, you will learn how to create a simple full-stack web application using AWS Amplify. Amplify offers a Git-based CI/CD workflow for building, deploying, and hosting single-page web applications or static sites with serverless backends.

What you will accomplish

In this tutorial, you will:

Build and host a React application on AWS
Use Amplify to add authentication, data & storage solutions to the app
Start a cloud sandbox environment that provides an isolated development space to rapidly build, test, and iterate on a fullstack app
Implement the frontend code to enable users to create, update, and delete notes

Prerequisites

Before starting this tutorial, verify that you have the following prerequisites completed:

An AWS account: if you don't already have one follow the Setup Your Environment tutorial.
Your AWS profile configured for local development.
Installed on your environment: Nodejs and npm.
Familiarity with git and a GitHub account.

AWS experience

Beginner

Time to complete

30 minutes

Cost to complete

Free Tier eligible

Requires

AWS account with administrator-level access*
AWS profile configured
Nodejs and npm
A Github account

*Accounts created within the past 24 hours might not yet have access to the services required for this tutorial.

Services used

AWS Amplify

Last updated

July 25, 2024

Modules

This tutorial is divided into four modules. You must complete each module in order before moving to the next one.

Deploy and Host a React App (10 minutes): Create a React app, then deploy and host it using AWS Amplify.
Initialize the Amplify Backend (10 minutes): Initialize a cloud backend that include authentication, a database, and storage.
Connect the App to the Cloud backend (10 minutes): Implement the frontend code to connect to the authorization, data and storage backend enabling users to create, update, and delete notes.
Clean up Resources (2 minutes): Clean up the resources used in this tutorial.

Was this page helpful?

Feedback

Start Module One

Deploy and Host a React App