AWS Projects: Get hands-on practice with multiple AWS services - AWS Amplify Gen 2 Tutorial | Build a React To-Do App | AWS Projects

AWS Amplify Gen 2 makes it easy to build full-stack web and mobile applications on AWS. But what exactly is it, and how do you get started? Also, how does it differ from Amplify Gen 1? In this hands-on tutorial, I’ll walk you through how to build your first app using Amplify Gen 2. We’ll start by copying the sample to-do code into GitHub, then deploy it to Amplify to see how the app works, and how to view things on the Amplify back end. From there, we’ll pull the code into our local development environment, using VS Code (or your IDE of choice). Next, we’ll make changes to the front end and back end, and look at how the sandboxes work to isolate your changes. Finally, we’ll push the updated code to GitHub, triggering Amplify’s CI/CD pipeline to deploy the changes to the cloud. Be sure to stick around to the end for step-by-step instructions on how to delete the resources provisioned during this video. 🌟***WHAT YOU NEED TO FOLLOW ALONG***🌟 • An AWS account, logged in with admin permissions • A GitHub account • VS Code or IDE of your choice 🌟***LINKS REFERENCED IN THIS VIDEO***🌟 • Amplify Gen 2 Quickstart guide (you’ll need this for the app’s code): https://docs.amplify.aws/react/start/quickstart • Instructions for setting up a local dev environment: https://docs.amplify.aws/react/start/account-setup • A video tutorial of setting up a local dev environment: https://youtu.be/3DJdA2OpMik • Amplify pricing: https://aws.amazon.com/amplify/pricing 🌟***OTHER VIDEOS YOU MIGHT ENJOY***🌟 • Lambda for Beginners: https://youtu.be/3Ar1ABlD_Vs • DynamoDB for Beginners: https://youtu.be/FQrN5aJWa_U 🌟***MY AWS COURSES***🌟 If you’re interested in getting AWS certifications, check out these full courses. They include lots of hands-on demos, quizzes and full practice exams. Use FRIENDS10 for a 10% discount! • AWS Certified Cloud Practitioner: https://academy.zerotomastery.io/a/aff_n20ghyn4/external?affcode=441520_lm7gzk-d • AWS Certified Solutions Architect Associate: https://academy.zerotomastery.io/a/aff_464yrtnn/external?affcode=441520_lm7gzk-d 🌟***TIMESTAMPS***🌟 00:00 – Previewing the completed React to-do app that uses Amplify Gen 2 00:25 – What you need to follow along 01:00 – Instructions for setting up your local Amplify development environment 01:14 – How much will this cost? 01:52 – Why would you use Amplify? 03:29 – Reviewing the Amplify Gen 2 Quickstart guide 05:10 – Copy the Quickstart sample app to your GitHub repo 05:57 – Deploying the Quickstart sample app to AWS Amplify 08:21 – Reviewing the project code structure for the Amplify Quickstart app 09:40 – Viewing the deployed app and its backend in the AWS Console 11:14 – Using Data Manager to view data from a DynamoDB table 11:59 – Viewing hosting information for Amplify in the AWS Console 12:49 – Cloning the GitHub repo to your local VS Code dev environment 14:46 – Failed to resolve import amplify_outputs.json from main.tsx – what’s going on? 16:18 – Where do we get the amplify_outputs.json file? 18:05 – Adding functionality to the front end for deletions and authentication 22:51 – Implementing CRUD operations with Amplify Gen 2 in TypeScript 23:34 – Pushing front-end updates to GitHub to trigger a CI/CD deployment 25:18 – Understanding the need for sandboxes in Amplify Gen 2 for backend updates 26:13 – Creating an Amplify Gen 2 sandbox with npx ampx sandbox command 26:48 – Setting up the local development environment to work with Amplify 27:18 – Expired SSO credentials for Amplify in VS Code, running aws sso login 27:50 – Viewing the Amplify Gen 2 sandboxes in the AWS Console 28:16 – Watching for file changes in the amplify_outputs.json file 29:19 – Making a backend change using the Amplify Gen 2 sandbox, implementing per-user authorization 32:32 – Pushing backend changes to GitHub and triggering a CI/CD deployment 33:29 – IMPORTANT! Deleting your resources