This was a great tutorial and I managed to get it working with ease. One thing I noticed is the size of the cards were too big for my display. I set an extra line in the script.js file for card.setAttribute('width', '240px'); which had the desired affect. I am sure there are other, better ways with CSS, but that worked for me for what I was doing. I also adapted the lessons I learned from this and your other tutorial for the Power or Math exponent calculator, and was able to create a small math app for a different project. Thank you for putting out all these great tutorials. I tried another one (the ride app), but it looks like AWS discontinued some of the services you built it with, so I couldn't follow along. I have to say, I'm learning a ton from your content. For anyone reading - what I found helpful was instead of just copying and pasting the code, manually type it out to learn it a little more. Then after you understand the concept, c/p in other projects.
Wow, what a fabulous comment, @Bush-LeagueBushcraft! 🥰 Thanks for taking the time to leave feedback and tips! 💪🙏🌟 I recently updated the ride sharing app to use GitHub instead of CodeCommit. Though I noticed a couple comments today saying that the Cognito UI got updated and doesn't match the video now (hard to keep up!). I haven't checked out that part yet, but here's the new link if you're interested: ua-cam.com/video/K6v6t5z6AsU/v-deo.html. Keep learning! 🤓
Your project videos are absolute gems! 🙏🏾🙏🏾Thanks for creating such a unique content that sets your channel apart from the rest. Your dedication and expertise shines through in every video. Keep up the fantastic work!💎✨💫
I really appreciate how your videos are helping me understand concepts. The explanations are clear and concise. Keep up the great work! Could you please consider doing more projects centered around Ansible and CI/CD pipelines, particularly involving technologies such as Jenkins, Kubernetes, and Docker?
@@TinyTechnicalTutorials thanking you first I still struggling with the console environment of AWS. I can't run it and im not sure why. I triyed different solutions but I can't fix it
Thanks for the tutorial Amber. I followed your tutorial on deploying a static resume website. I had a similar idea to this video, but applying that to my resume. My idea of this was having a way to just update the code of my resume without having to manually add and delete the html, css, JS files each time. Could you possibly make a tutorial on how to make a continuous deployment infrastructure using the pipeline for the resume website?
Hi Jesse! 👋 I'm glad the videos are helpful! I love this idea...so taking the resume, and putting it in GitHub, then setting up the pipeline so you don't have to manually update the files. I'll add this to my list for future videos! 😊
Muchas gracias Tiny por este laboratorio simples y práctico, esperamos que sigas subiendo mas laboratorios, de preferencia que utilice recursos relacionadas a redes. Saludos
Thank you for the tutorial! I followed your instructions and I saw the S3 bucket automatically pulling data from GitHub after a push. But my CloudFront didn't automatically redeploy. What could I be missing?
@@TinyTechnicalTutorials Yes, I figured it out! CloudFront was caching the pages, so I needed to run an invalidation to remove them and pull more data from the bucket. I automated this using AWS Lambda.
hello The trigger configuration for the source action is not valid. Make sure to choose one trigger configuration for each source action. getting above error
@TinyTechnicalTutorials, I have a question. How would this work if you have a backend to talk to? Can the same method be used, just with a few extra steps? Thank you for your time.
Hi @dnogitsune9286! 👋 Sorry for the slow response! If you're still looking for an answer, yes, you could absolutely use this approach for an app with a backend. You'd need to modify the pipeline to add a stage for backend, and you'd also want to define the backend infrastructure in code, like with CloudFormation. For example: 1. Define Your Backend Infrastructure using CloudFormation Common backend components could include an API (hosted on AWS Lambda, EC2, or ECS), databases (RDS, DynamoDB), and other AWS services (S3, CloudFront, etc.) 2. Configure CodePipeline Modify your existing CodePipeline to include stages for deploying the backend, such as: -Source Stage: Fetch code from your source repository (GitHub, CodeCommit, etc.) -Build Stage: Use AWS CodeBuild to build both the frontend and backend code -Deploy Frontend Stage: Deploy the static website to the S3 bucket -Deploy Backend Stage: Deploy the backend using CloudFormation or other deployment services You'd probably also need to modify IAM roles/policies to ensure Code Pipeline has permissions it needs to deploy the backend. And then the usual testing, monitoring, etc. Hope that helps! 🤓
Is anyone else having trouble getting it to run? I can only use a v2 pipeline and I think the triggers aren’t working, because the button doesn’t do anything
Hi Arsilda! 👋 Thank YOU for watching my work! 😊 I've had a few people request Azure and GCP content. I've added it to my list for future ideas...if I get enough "votes," then I definitely will!
Thank you so much ! You just got a subscriber ! Can you please tell me how to add more images? Never mind I found how to add new pictures. Thank you so much again !
I have one doubt after creating pipeline it is showing success but when i go to bucket website hosting when i am opening the link i cannot get output.. it is saying that access denied some thing like that.. can you plz tell me why it is coming likethat
Very well done AMber. Thanks for all that you do for the cloud community. By the time I finished my project, my game is showing just 8 pictures, and I checked the js file and css file, everything seems to be in order. What do you think could be responsible?
I am an AWS student and LOVE your channel and the way you teach. Thank you for what you do! I have a demo coming up and completed this project earlier, but need to present for 30 minutes, followed by a 30 minute Q&A session, so I worry this alone may be too short for that. With that said, in theory, could I make this project and incorporate a Lambda function to resize images as they are added to the source files in the S3 bucket? That way all of the pics fit the memory cards as they should. Also, could I set up SQS/SNS to notify for something in the project? Maybe when something has been added and successfully resized? Just to show event driven architecture as well? Thoughts? Again, thank you! I love your channel and will be sure to share it with my classmates...after the project of course :)
Thanks for the kind words, Matt!! I love that you're getting so much from the channel. 🥰🙏 I really like the idea of incorporating Lambda. You could talk about serverless and its benefits. If you need it, I've got a "Lambda for beginners" video here that walks through how to set up a trigger with S3, which you'll need: ua-cam.com/video/3Ar1ABlD_Vs/v-deo.html. For the notifications piece, you can publish a message to SNS from Lambda, so yeah, maybe when the Lambda function is done resizing. Here's some info on that: repost.aws/knowledge-center/sns-topic-lambda. If you wanted to fill a little more time, you could also set up CloudFront to point to the S3 bucket. It'll be hard to see a performance difference with such a simple site, but you could talk about how it uses caching to get content to users faster. Here's a beginner video for that if you need it: ua-cam.com/video/GUfAQUjA3a0/v-deo.html Good stuff! You got this! 💪🤓🔥 Let me know how the presentation goes!
@@TinyTechnicalTutorials Thank you! I just re-created the game, but this time I had to attach a Codestar customer managed IAM policy to my user, which I didn't have to do yesterday. Is that because I may have made yesterday's game using my root account?
Hi aisha! 👋 React components would re-render based on state or props changes, not directly from the CI/CD pipeline. For example, if you update a component to display new data or change its appearance, those changes will take effect once the new version is deployed and the user accesses the updated app. Hope that makes sense. Thanks for watching! 🤓🙏🌟
I'm making my own app that I want to connect with AWS (to fetch data) but just can't do it. Is there any way that you can help me with this? I don't know how to contact you directly :(
@@TinyTechnicalTutorials Thank you for response! At the moment, my application primarily interested in specifically for Amazon product listings and ad optimization. I'm in the process of considering how to integrate with the Amazon Ads API to fetch advertising data directly into my application. However, I'm facing challenges in establishing this connection effectively. Any guidance or insights you could provide on this would be incredibly helpful. Additionally, I haven't yet integrated a database for storing application data like user profiles, product details, or historical SEO content. As my app develops, I'm evaluating the need for either a relational database (possibly with Amazon RDS) or a non-relational database (like Amazon DynamoDB), depending on the nature of data storage required in the future. I'm cautious about discussing the specifics of my application publicly, but I'd be eager to share more details with you privately. As an expert in digital marketing with beginner-level development skills, I have an exciting app idea related to this field. If you're open to it, I'd love to connect directly and discuss this project in more depth.
This is really amazing. I have one question. Will the game work normally after deleting the bucket and the pipeline? please reply @TinyTechnicalTutorials
Thanks for watching, Amrit! 🤓 It won't work after deleting the bucket (since it contains the code files). But you should be able to delete the pipeline.
What else do you want to learn in AWS? Let me know below! 🤓🤓
Hey @SAYLESSTIME! 👋 I'm not sure I'm following...a stream walk? 😊
Have you done a video on AWS Lambda. Also I am going to try the game app since I am learn Cloud Practitioner
Great! 😊 Yes, you can find my Lambda video here: ua-cam.com/video/3Ar1ABlD_Vs/v-deo.html
@@TinyTechnicalTutorials thank you for the tutorials. I have to put them on a Playlist for future viewing and references.
Awesome!! Enjoy! 🤓🔥
Thank you for you help and quick responses! As an AWS student, having content like yours is SO valuable!
You are so welcome! Thank YOU for the super thanks!!!! 🥰🙏🌟😊🔥🥰
@@TinyTechnicalTutorials My pleasure, it's the least I can do!
excellent demo, quick , accurate , with specific instructions !! I hope all video tutorials have your philosophy !!
Keep up the good work !!
Thanks for the kind words, Panagiotis!! 🤓🙏🌟 I'm so glad you liked it!
This was a great tutorial and I managed to get it working with ease. One thing I noticed is the size of the cards were too big for my display. I set an extra line in the script.js file for card.setAttribute('width', '240px'); which had the desired affect. I am sure there are other, better ways with CSS, but that worked for me for what I was doing. I also adapted the lessons I learned from this and your other tutorial for the Power or Math exponent calculator, and was able to create a small math app for a different project.
Thank you for putting out all these great tutorials. I tried another one (the ride app), but it looks like AWS discontinued some of the services you built it with, so I couldn't follow along.
I have to say, I'm learning a ton from your content.
For anyone reading - what I found helpful was instead of just copying and pasting the code, manually type it out to learn it a little more. Then after you understand the concept, c/p in other projects.
Wow, what a fabulous comment, @Bush-LeagueBushcraft! 🥰 Thanks for taking the time to leave feedback and tips! 💪🙏🌟 I recently updated the ride sharing app to use GitHub instead of CodeCommit. Though I noticed a couple comments today saying that the Cognito UI got updated and doesn't match the video now (hard to keep up!). I haven't checked out that part yet, but here's the new link if you're interested: ua-cam.com/video/K6v6t5z6AsU/v-deo.html. Keep learning! 🤓
Your project videos are absolute gems! 🙏🏾🙏🏾Thanks for creating such a unique content that sets your channel apart from the rest. Your dedication and expertise shines through in every video. Keep up the fantastic work!💎✨💫
Thank you for SUCH a nice comment, @tabtubb!! This made my day. 🥰🙏🌟 Really appreciate the support!
@@TinyTechnicalTutorials I'm thrilled, You're very welcome! Your content deserves all the support & appreciation. Keep shining 🌟
This tutorial made my day ...thanks for explaining every single steps clearly
Your comment made my day! 🥰 Thanks so much! Glad it was helpful. 🤓
awesome stuff, to the point and unique quick content. just 15 mins and I got to learn how code pipeline works.
Glad it was helpful! Thanks for watching! 🙏🤓🌟
Very nice!! Keep sharing. Appreciate it. Liked how you add a DELETE your resources section at the end of each video!!
Yes, you never want a surprise bill! Thanks for watching!! 🙏🌟🤓
I really appreciate how your videos are helping me understand concepts. The explanations are clear and concise. Keep up the great work!
Could you please consider doing more projects centered around Ansible and CI/CD pipelines, particularly involving technologies such as Jenkins, Kubernetes, and Docker?
Great to hear! I'm so glad you like the videos. I'll add these topics to my list for future videos...thanks for the suggestions! 🙏🤓
Thank you for this tutorial, very clear, I was able to host a static website using s3 and codePipeline.
WOOHOOO!! Strong work! 🤓🔥💪
Pipeline v1 can no longer be configured in the console. Only v2
That was a great deployment on static websites, thanks for sharing this valuable contained
Absolutely!! I'm so glad it helped! 🌟🙏🤓
I really loved you video. I still learning AWS and your Channel its one of my main resources to continue my journey . GRACIAS!!
De nada!! 🙏🌟🤓
@@TinyTechnicalTutorials thanking you first I still struggling with the console environment of AWS. I can't run it and im not sure why. I triyed different solutions but I can't fix it
Nice explanation and easy to understand all the steps. thanks😊
So nice of you! I'm glad it helped. Thanks for watching! 🙏🤓🌟
Thanks for the tutorial Amber. I followed your tutorial on deploying a static resume website. I had a similar idea to this video, but applying that to my resume. My idea of this was having a way to just update the code of my resume without having to manually add and delete the html, css, JS files each time.
Could you possibly make a tutorial on how to make a continuous deployment infrastructure using the pipeline for the resume website?
Hi Jesse! 👋 I'm glad the videos are helpful! I love this idea...so taking the resume, and putting it in GitHub, then setting up the pipeline so you don't have to manually update the files. I'll add this to my list for future videos! 😊
Muchas gracias Tiny por este laboratorio simples y práctico, esperamos que sigas subiendo mas laboratorios, de preferencia que utilice recursos relacionadas a redes. Saludos
Gracias por el lindo comentario. ¡Definitivamente publicaré nuevos videos en el futuro! 🥰🌟🤓
Thank you for the tutorial! I followed your instructions and I saw the S3 bucket automatically pulling data from GitHub after a push. But my CloudFront didn't automatically redeploy. What could I be missing?
Hi Micheal! 👋 Sorry for the slow response! Were you able to get this working? I wonder if it just needed a few minutes for the changes to propagate?
@@TinyTechnicalTutorials Yes, I figured it out! CloudFront was caching the pages, so I needed to run an invalidation to remove them and pull more data from the bucket. I automated this using AWS Lambda.
Strong work! 💪🔥 Thanks for posting the solution...hopefully it'll help someone else!
Successfully implemented. Very much helpful. Thanks for this project.
hello
The trigger configuration for the source action is not valid. Make sure to choose one trigger configuration for each source action.
getting above error
while triggring the code pipeline
@@atultiwari4885 Yeah, Select push option to solve this problem.
Awesome work! 🤓🔥💪 Thanks for watching, and for such a nice comment (and sorry for the slow response)! 🥰
@TinyTechnicalTutorials, I have a question. How would this work if you have a backend to talk to? Can the same method be used, just with a few extra steps? Thank you for your time.
Hi @dnogitsune9286! 👋 Sorry for the slow response! If you're still looking for an answer, yes, you could absolutely use this approach for an app with a backend. You'd need to modify the pipeline to add a stage for backend, and you'd also want to define the backend infrastructure in code, like with CloudFormation. For example:
1. Define Your Backend Infrastructure using CloudFormation
Common backend components could include an API (hosted on AWS Lambda, EC2, or ECS), databases (RDS, DynamoDB), and other AWS services (S3, CloudFront, etc.)
2. Configure CodePipeline
Modify your existing CodePipeline to include stages for deploying the backend, such as:
-Source Stage: Fetch code from your source repository (GitHub, CodeCommit, etc.)
-Build Stage: Use AWS CodeBuild to build both the frontend and backend code
-Deploy Frontend Stage: Deploy the static website to the S3 bucket
-Deploy Backend Stage: Deploy the backend using CloudFormation or other deployment services
You'd probably also need to modify IAM roles/policies to ensure Code Pipeline has permissions it needs to deploy the backend. And then the usual testing, monitoring, etc.
Hope that helps! 🤓
great work! consider doing a video on CDK for infrastructure as code
Glad you liked it! And yes, I definitely want to do some CDK videos...I'll bump them up my list a little bit. Thanks for watching! 🙏🌟🤓
Is anyone else having trouble getting it to run? I can only use a v2 pipeline and I think the triggers aren’t working, because the button doesn’t do anything
I have deployed it succesfully. What error are you getting?
Hey Felipe! 👋 Were you able to get this working?
Is there any possibilities to create videos with google could or Azure too.?Thank you for sharing your work!
Hi Arsilda! 👋 Thank YOU for watching my work! 😊 I've had a few people request Azure and GCP content. I've added it to my list for future ideas...if I get enough "votes," then I definitely will!
Could I please know how to edit the code which is already deployed or published using aws and redeploy it
awesome content. Could you please also make a video including build stage.
Yes! Glad it was helpful! I'll add this idea to my list for future videos. Thanks for watching! 🙏🤓🌟
can i add this projects in my resume ??
Excellent tutorial!!!
YAY!! I'm so glad it helped. Thanks for watching!! 🙏🌟🤓
Thank you so much ! You just got a subscriber ! Can you please tell me how to add more images? Never mind I found how to add new pictures. Thank you so much again !
Yay! I'm so glad it was helpful. Thanks for watching, and welcome to the channel! 🙏🌟🤓
Thank you! Very Useful!
Yay! I'm so glad it helped. Thanks for watching!! 🙏🤓🌟
I have one doubt after creating pipeline it is showing success but when i go to bucket website hosting when i am opening the link i cannot get output.. it is saying that access denied some thing like that.. can you plz tell me why it is coming likethat
Hi Pandu! 👋 Did you update the S3 bucket policy to allow access? See around 05:14 in the video.
yaa.. i got it.. thanks @@TinyTechnicalTutorials
@@TinyTechnicalTutorials yes i updated it.. i got output. thanks for your help and quick response
Very well done AMber. Thanks for all that you do for the cloud community. By the time I finished my project, my game is showing just 8 pictures, and I checked the js file and css file, everything seems to be in order. What do you think could be responsible?
Hi Baba! 👋 Thanks the kind words, and apologies for the slow response! Were you able to get this working?
I am an AWS student and LOVE your channel and the way you teach. Thank you for what you do!
I have a demo coming up and completed this project earlier, but need to present for 30 minutes, followed by a 30 minute Q&A session, so I worry this alone may be too short for that.
With that said, in theory, could I make this project and incorporate a Lambda function to resize images as they are added to the source files in the S3 bucket? That way all of the pics fit the memory cards as they should.
Also, could I set up SQS/SNS to notify for something in the project? Maybe when something has been added and successfully resized? Just to show event driven architecture as well?
Thoughts?
Again, thank you! I love your channel and will be sure to share it with my classmates...after the project of course :)
Thanks for the kind words, Matt!! I love that you're getting so much from the channel. 🥰🙏
I really like the idea of incorporating Lambda. You could talk about serverless and its benefits. If you need it, I've got a "Lambda for beginners" video here that walks through how to set up a trigger with S3, which you'll need: ua-cam.com/video/3Ar1ABlD_Vs/v-deo.html.
For the notifications piece, you can publish a message to SNS from Lambda, so yeah, maybe when the Lambda function is done resizing. Here's some info on that: repost.aws/knowledge-center/sns-topic-lambda.
If you wanted to fill a little more time, you could also set up CloudFront to point to the S3 bucket. It'll be hard to see a performance difference with such a simple site, but you could talk about how it uses caching to get content to users faster. Here's a beginner video for that if you need it: ua-cam.com/video/GUfAQUjA3a0/v-deo.html
Good stuff! You got this! 💪🤓🔥 Let me know how the presentation goes!
@@TinyTechnicalTutorials THANK YOU! I'm going to build it out using your videos today. I'll let you know how it goes!☺
Good luck!!! 🔥💪
@@TinyTechnicalTutorials Thank you! I just re-created the game, but this time I had to attach a Codestar customer managed IAM policy to my user, which I didn't have to do yesterday. Is that because I may have made yesterday's game using my root account?
Yeah, that could be. If you created it with root yesterday, then things would have automagically worked from a permissions perspective.
Can this be used for a react app to rerender a component ?
Hi aisha! 👋 React components would re-render based on state or props changes, not directly from the CI/CD pipeline. For example, if you update a component to display new data or change its appearance, those changes will take effect once the new version is deployed and the user accesses the updated app. Hope that makes sense. Thanks for watching! 🤓🙏🌟
I'm making my own app that I want to connect with AWS (to fetch data) but just can't do it. Is there any way that you can help me with this?
I don't know how to contact you directly :(
Hi Aleksandar! 👋 Where in AWS is your data located? An S3 bucket? A database? Something else?
@@TinyTechnicalTutorials Thank you for response! At the moment, my application primarily interested in specifically for Amazon product listings and ad optimization. I'm in the process of considering how to integrate with the Amazon Ads API to fetch advertising data directly into my application. However, I'm facing challenges in establishing this connection effectively. Any guidance or insights you could provide on this would be incredibly helpful. Additionally, I haven't yet integrated a database for storing application data like user profiles, product details, or historical SEO content. As my app develops, I'm evaluating the need for either a relational database (possibly with Amazon RDS) or a non-relational database (like Amazon DynamoDB), depending on the nature of data storage required in the future.
I'm cautious about discussing the specifics of my application publicly, but I'd be eager to share more details with you privately. As an expert in digital marketing with beginner-level development skills, I have an exciting app idea related to this field. If you're open to it, I'd love to connect directly and discuss this project in more depth.
I am Trying to access in my Mobile Its not Working may I know what is the Reason ???
Which part are you trying to access?
Very cool. Thank you :)
So glad it helped! Thanks for watching! 😊🙏🌟
great project- thanks
You bet! Thanks for watching! 😊🙏🌟
😊 I love your videos
Awww...thanks so much!! 🥰🙏🌟
Thank you!
You bet! Glad it helped! 💪🔥
Beautiful
Thank you ma
You bet! Thanks for watching! 🙏🤓🌟
OMG I love you sooo much
Hahaha!!! Thanks, Brian!! 😊😄
🙏👍
Thank you, Rishi!! 🙏🤓🌟
What a beautiful lady⚘️
Ha! Thank you! 😊
@@TinyTechnicalTutorials yw beautiful
be regular
Okay! 🤓
This is really amazing. I have one question. Will the game work normally after deleting the bucket and the pipeline? please reply @TinyTechnicalTutorials
Thanks for watching, Amrit! 🤓 It won't work after deleting the bucket (since it contains the code files). But you should be able to delete the pipeline.