Build a Full Stack React Application
TUTORIAL
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
Last updated
July 25, 2024
Tasks
This tutorial is divided into four tasks. You must complete each task 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.