Developer Center / Getting Started / Hands-on / ...
Getting Started with AWS
Build a Full-Stack React Application
Create a simple web application using AWS Amplify
Introduction: Build a Full-Stack React Application
Follow step-by-step instructions to build your first React application.
Overview
In this tutorial, you will create a simple full-stack web application using AWS Amplify, a set of tools and services including a web hosting service. In the first module, you’ll build and host a React application on AWS. Through the remaining 4 modules, you will initialize a local app using the CLI, add authentication, add a GraphQL API and database, and update your app to store images.
What You Will Learn
This tutorial will walk you through the steps to create a simple web application discussed above. You will learn:
- Hosting: Build and host a React application on the AWS Global content delivery network (CDN)
- Authentication: Add auth to your app to enable sign-in and sign-out
- Database and Storage: Add a GraphQL API, database, and storage solution
AWS Experience
Beginner
Time to Complete
50 minutes
Cost to Complete
Free Tier eligible
Tutorial Prereqs
- AWS Account with administrator-level access*
- Node.js: Node.js v10.x or later
- GitHub account
- Git**: Windows users will need to install Git
- A text editor. Here are a few free ones we like (in alphabetical order): Atom, Notepad++, Sublime, Vim, Visual Studio Code
[*]Accounts created within the past 24 hours might not yet have access to the services required for this tutorial.
[**] Not applicable for iOS users as Git comes standard
Modules
This tutorial is divided into five short modules. You must complete each module in order before moving on to the next one.
- Deploy and Host a React App (10 minutes): Create a React app and deploy and host through AWS Amplify.
- Initialize a Local App (5 minutes): Initialize a local app using AWS Amplify.
- Add Authentication (10 minutes): Add auth to your application.
- Add a GraphQL API and Database (15 minutes): Create a GraphQL API.
- Add the Ability to Store Images (10 minutes): Add storage to your app.
You will be building this React application using the Command Prompt/Terminal, test editor, and AWS Web Console.