Back to Browse

AWS Project–Building a React App with Amplify (Gen 1), Cognito, and CI/CD with GitHub | AWS Tutorial

47.9K views
Mar 28, 2024
29:19

In this hands-on tutorial, I’ll show you how to build a simple React app (a quiz app) using AWS Amplify Gen 1 and Cognito. We’ll also see how to set up continuous integration and continuous deployment (CI/CD) using GitHub. By the time you’re done, you’ll have a fully-functioning application you can share with the world, on a real-live Amplify URL. 🌟🌟 For Amplify Gen 2, check out this video: https://youtu.be/7-7ugqAxgxI 🌟🌟 GitHub repo for code and commands: https://github.com/tinytechnicaltutorials/amplify-cognito-quiz 🤓 For diagramming and checklists in this video, I used Eraser.io. Check them out! https://www.eraser.io/ 🤓 For another fun project that uses Cognito, Amplify, Lambda, API Gateway and DynamoDB, check out this other video: https://youtu.be/zuKu0VFiwas 🌟***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 app that uses Amplify and Cognito 00:28 – How much will this cost? 02:16 – Setting up our to-do checklist and diagram in Eraser.io 03:23 – Setting up the environment and installing the Amplify CLI 03:35 – The GitHub repo to get all the code and commands for this video 03:58 – Using the amplify configure command with the Amplify CLI 06:16 – Creating the access key ID and secret access key for amplify-dev IAM user 07:56 – Creating a new React app from VS Code 08:30 – Using the amplify init command to initialize the Amplify project 10:49 – Adding authentication to the React app using Cognito 12:31 – Validating the Cognito user pool was successfully created 12:52 – Adding the aws-amplify/ui-react libraries for the Cognito sign-in UI 14:02 – Running the React app to register for an account and log in using Cognito 15:37 – Reviewing the code that enables Cognito authentication from the React app 16:47 – Adding functionality and styling for the quiz 18:40 – Create a new GitHub repository and push local code to it 22:20 – Setting up Amplify hosting and CI/CI from GitHub 24:51 – Creatin a new service role for Amplify Hosting 26:24 – Testing our final React application hosted in Amplify 26:56 – Testing continuous integration continuous deployment (CI/CD) with a GitHub commit 29:04 – IMPORTANT! Deleting your resources

Download

1 formats

Video Formats

360pmp434.2 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

AWS Project–Building a React App with Amplify (Gen 1), Cognito, and CI/CD with GitHub | AWS Tutorial | NatokHD