AWS Project - Building a React App with Amplify, Cognito, and CI/CD with GitHub

AWS Project - Building a React App with Amplify, Cognito, and CI/CD with GitHub | AWS Tutorial

Рет қаралды 8,709

Күн бұрын

In this hands-on tutorial, I’ll show you how to build a simple React app (a quiz app) using AWS Amplify 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.
🌟🌟 GitHub repo for code and commands: github.com/tinytechnicaltutor...
🤓 For diagramming and checklists in this video, I used Eraser.io. Check them out! www.eraser.io/
🤓 For another fun project that uses Cognito, Amplify, Lambda, API Gateway and DynamoDB, check out this other video: • AWS Portfolio Project:...
🌟***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: academy.zerotomastery.io/a/af...
• AWS Certified Solutions Architect Associate: academy.zerotomastery.io/a/af...
🌟***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

Пікірлер: 74

@TinyTechnicalTutorials 2 ай бұрын

Another AWS project video! Hope you like it! 🤓

@exaaltare1170 Ай бұрын

Supper, thank you so so much!!!

@continuouslearner 3 күн бұрын

Brilliant, more such end to end projects please.

@smithchristian4251 Ай бұрын

I think you should make a series. Can we learn next part on groups of users (Admin, staff, customer) and allow them to access data based on user permissions.

@TinyTechnicalTutorials Ай бұрын

Great suggestion! I'll add this to my list for future videos. Thanks for the comment! 🤓

@Riko0013 Ай бұрын

that would be awesome!!

@jivesyt Ай бұрын

I never leave comments on videos, but this is one of the best developer video I have ever seen. You are concise and clearly explain how each piece fits together, without going into too much detail about topics that aren't the focal point of what you're trying to cover.

@TinyTechnicalTutorials Ай бұрын

Wow, I'm going to print out this comment and hang it on my wall! 🥰 Thanks for watching, and for taking the time to comment...super appreciate it! 🙏🤓🌟

@Billyxiao 23 күн бұрын

Dear @TinyTechnicalTutorials I can't express how much i would like to thank you to teach this for free.

@TinyTechnicalTutorials 11 күн бұрын

@Billyxiao - This comment made my day!!! Thanks for supporting the channel! 🤓🙏🌟

@yusefalimam130 16 күн бұрын

This is incredible! Thank you so much for doing these. You open doors for so many others when you share this kind of information and take the time to present it thoughtfully

@TinyTechnicalTutorials 11 күн бұрын

Awwww...what a nice comment!! I'm so glad it helps. Thanks for watching! 🙏🌟

@ultrasys 2 ай бұрын

06:30 in the morning, I go check the news and get notified about a new video. Hmmm, React is far from being something I’m interested in but I decide to check it out based on my previous positive experience watching TTTs videos. No surpriae, good surprise. Again, I learned A LOT out of an unsuspected subject. It makes me wonder what motivates the refreshing grinning embedded in the speech. Refreshing, light, and instructional. Believe me: your videos teach much more than some specific skill. Also, it’s a real joy to even hear them while making a coffee to get started for the day. Thanks for the excellent way of stating the day.

@TinyTechnicalTutorials 2 ай бұрын

Wow, SUCH nice comment--THANK YOU!! Years ago, someone told me I always "have a smile in my voice." Not sure where that comes from, but glad it's nice to listen to! 🥰☕And glad you learned something too!

@mariocesena2277 Ай бұрын

Love your content! Your videos made all that theory I've been digging through click for me. Got that "aha" moment, thanks!

@TinyTechnicalTutorials Ай бұрын

Awwww...aha moments are the BEST! Thanks for watching!! 🙏🌟🤓

@darjidhruv2665 2 ай бұрын

That's really amazing,it really helps me to enhance my skill

@TinyTechnicalTutorials 2 ай бұрын

I'm so glad!! Thanks for watching! 🤓🌟🙏

@sudhanshukumar-hg8jk 2 ай бұрын

Thnk u mam your videos are always full of knowledge....very much appreciated 😊

@TinyTechnicalTutorials 2 ай бұрын

You bet! 😊 Thanks supporting the channel! 🌟🙏

@againts-brainwashers 27 күн бұрын

when the new video come , i completed most of the video of your playlist

@TinyTechnicalTutorials 25 күн бұрын

Awwwww...thank you so much!! 🥰 Really appreciate the support! I'm behind on new videos, but stay tuned for more! 😊

@againts-brainwashers 25 күн бұрын

@@TinyTechnicalTutorials thank u

@josuemanuellopezlezama2692 Ай бұрын

Great tutorial! Thank you 👏🏻

@TinyTechnicalTutorials Ай бұрын

Glad it was helpful! Thanks for watching, and for the nice comment! 🤓🙏🌟

@PowerAppsTutorial 2 ай бұрын

Great stuff. Love your videos. 👍👍

@TinyTechnicalTutorials 2 ай бұрын

Thanks, as always, @PowerAppsTutorial!! 🙏🌟🤓 Hope life is awesome!

@itsjaysenofficial 8 күн бұрын

AMAZING EASY TO UNDERSTAND!! THANK YOU SO MUCH!!!. if i did this should i still watch the aws amplify in plain english???

@AIAnimationStudio Ай бұрын

This was a really superb video, thanks for taking all the time to plan, test and make it. (*I've been trying to achieve a similar process via CDK, and this helped shed some light on lots of areas).

@TinyTechnicalTutorials Ай бұрын

Glad it was helpful! Thanks for watching, and for such a nice comment! 🤓🙏🌟

@siddhantkhanna9053 2 ай бұрын

Thanks for this tutorial ❤❤

@TinyTechnicalTutorials 2 ай бұрын

You're welcome! 😊 Thank YOU for watching! 🤓🌟🙏

@eiwlhunter 2 ай бұрын

Oh Dear🎉Amber🎉 mark this first, will try it out after Easter. Thank you ❤!

@TinyTechnicalTutorials 2 ай бұрын

Haha! Okay! 🥰

@faaizshah5830 Ай бұрын

Awesome work 👏

@TinyTechnicalTutorials Ай бұрын

Thank you! Cheers! 🥰🤓🙏

@mantrax314 Ай бұрын

Great Content!

@TinyTechnicalTutorials 25 күн бұрын

Thank you SO much for the nice comment and donation!!! You're very kind!! 🙏🥰🙏🥰

@CHiRaStar1 Ай бұрын

By far one of the best learning video I have watched in recent times. Really nice way to explain all things so precisely. Can you pls tell me how we can execute a glue job from giving glue job name from UI itself

@TinyTechnicalTutorials Ай бұрын

Thanks for the nice comment, @ChiRaStar1! 😊 I don't have any videos about Glue, but I believe you can accomplish what you need through the UI in Glue Studio? docs.aws.amazon.com/glue/latest/dg/managing-jobs-chapter.html

@CHiRaStar1 Ай бұрын

@@TinyTechnicalTutorials no this will not help me. My question is how can we trigger or invoke any aws service from UI itself . Like UI followed by apigateway then lambda

@joshbleijenberg4000 2 ай бұрын

Can you do the same for React Native and mobile development. And focus on the CI/CD processen en app updates in the stores

@TinyTechnicalTutorials 2 ай бұрын

I haven't done too much with React Native and mobile dev, but I'll add this to my list to research for future videos. Thanks for the suggestion! 👍🤓

@21cabbage22 Ай бұрын

Awesome tutorial you are a lifesaver! Would it be possible to store user registration info from cognito into a mysql/rds db?

@TinyTechnicalTutorials Ай бұрын

I'm glad it was helpful! 😊 I haven't tried that myself, but this discussion has a few ideas for how you could do it: stackoverflow.com/questions/75188739/storing-user-details-in-aws-rds-using-cognito

@keith_6461 2 ай бұрын

Thank you very much

@TinyTechnicalTutorials 2 ай бұрын

Any time! Thank YOU for watching! 🤓🌟🙏

@mantrax314 Ай бұрын

Thanks!

@TinyTechnicalTutorials 25 күн бұрын

Oh my goodness...THANK YOU SO MUCH!!!! And sorry for the delayed response! This made my day!! 🙏🥰🌟🔥 Really appreciate the support!!!

@khalidelgazzar Ай бұрын

Kool 😎👍 thank you

@TinyTechnicalTutorials 25 күн бұрын

You bet! Thanks for watching! 🙏🤓🌟

@emirmaya3196 Ай бұрын

Awsome tutorial! Could you make a bigger project with React + Amplify please? I want to learn how to use to implements in my react projects. Greetings from Argentina!

@TinyTechnicalTutorials Ай бұрын

Greetings, Emir!! 👋 So glad you liked it! Yes, I definitely want to do more with React+Amplify. Thanks for the up-vote! 👍

@arieladalid9910 Ай бұрын

Thank you ❤❤❤

@TinyTechnicalTutorials Ай бұрын

You're welcome! 😊 Thanks for watching! 🤓🙏🌟

@regilearn2138 11 күн бұрын

I am new to AWS and react, I got a task that upload a file to S3 bucket to using serverless Lambda function, would appreciate if you can guide me on this. What are the area I should focus. any video on this.

@satadhi 2 ай бұрын

These videos are awesome ! what happens during amplify init and if I set it to dev mode ? Also it will be great if you can explain the code or give some links to under stand the cognito part of code. Thank you :)

@TinyTechnicalTutorials 2 ай бұрын

Glad you're enjoying the videos, @satadhi! 🤓 I'm not sure I'm following "dev mode"? Here are the parameters for the amplify init command: docs.amplify.aws/javascript/tools/cli/usage/headless/#amplify-init-parameters. I'm not seeing anything about a mode or dev mode? And I can definitely explain the code better in future videos. Thanks for that feedback! 🙏

@KP-mk8wx 2 ай бұрын

Excellent! Can you reengineer the entire infrastructure from the finished resources using Cloud Formation? I mean is there a way for someone to recreate all the resources used in this project from the CLI without having to go to AWS console? Kindly provide guidance.

@TinyTechnicalTutorials Ай бұрын

Hi KP! 👋 There is a tool called the IaC Generator that will look at the resources in your account and generate a CloudFormation template: docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/generate-IaC.html I haven't used it myself, but yes, it's totally possible to build the infrastructure using CloudFormation instead of the console. 🤓

@olaleyeoyewunmi6978 2 ай бұрын

I’m trying to switch from frontend to cloud , came accross your channel and I love it , my build failed on aws , but then it build completely in my local machine , how do I check the logs on aws to know the issue , I did exactly what you did in the video , thanks 26:18

@TinyTechnicalTutorials Ай бұрын

Hi Olaleye! 👋 When the build fails in Amplify, you should be able to click on the step where it failed (should be a red icon) to see more about the problem.