How to deploy your React App to AWS with the Serverless Framework - Full Tutorial with CloudFront

In this video we'll learn how we can deploy a React app using Serverless. We'll learn how to set up a CloudFront distribution and how that can help increase the performance of the your website.

Link to the code to start the lesson:
Link to the finished code:

[cli]

This is very helpful, Sam! You showed us how efficient it is to deploy a s3 website with cloudfront distribution using the serverless framework.

[ganeshp]

Very helpful. Thank you Sam.

Please make more tutorials on complete app architecture like real world apps if app has multiple web portals and many lambdas etc.

Thanks again for great tutorials 👍🏽

[manveersingh]

Wow, your knowledge is amazing. You are so clear with your concepts!

[leesingchyun]

Thank you for this video. It's helpful learning how to deploy static files to S3 and CloudFront for web hosting.

[iozzyi]

@26:40 the SSL certificate didn't seem to work as the browser says 'Not Secure' next to the address bar ?

[junhuixu]

I love this video series! I did follow each line of codes and did it! Thank you so much!!

[leugimsimara]

You are doing an amazing job! Thanks for all the videos! If you complement this with Route 53, AWS CodeCommit, AWS CodePipeline, you have the entire thing right away. Thanks!

[WolFX_FPS]

Good to see how to build the serverless deployment yml, but, my installation did not have sls, so when i got to the end to enter 'sls deploy' i was disappointed to find there was no sls installed so I had no real take away from this.

[SumitKumar-Jais]

At end you hit s3 url not cloud front. You have to use cloud front distribution url as u intended for this video

[maxbildner]

thank you for these videos! Any chance of doing a tutorial on deploying serverless with next.js? :D

[fedjioraymond]

But it's still http and not https

[luxlmj]

Love the video. The web page you deplyed was a dynamic one?

[fmolinariUtube]

I'm trying to see the index.html in the browser but I can't. Files are there in S3. My react app has routes inside App.js - I may need to change something maybe webpack? Pls give a hand. Thanks. Normally we can't open index.html in a react app

[AliveRumble]

Hey I wanted to ask if you had a video or planned on making a video to explain if you wanted to have more than just an index.html page. I wanted to start building a store, but i dont know how to setup the naviagations.

[taptapdan]

Really appreciate the tutorials on Serverless. Where do you find all the yml file properties to set all this up? Thanks!

[programmusicuk]

Thanks for another great and easy to follow tutorial Sam! How do we deploy this react app with serverless yml to a registered domain name on Route 53?

[marcindzieszko]

Very helpful. Thank you.
I have been trying to deploy the existing react app to AWS through serverless and looks it is deployed with success.
But when I tried to open this app in a browser it does not load fully ...
In inspection we can see there are downloaded only some files that are needed. The rest of them are not downloaded at all - there are no even attempts. Do you know maybe what could be a possible reason. On what we should pay attention?

[omkarsk]

What if I wish to land on the root url without adding index.html at the end?

[marcuslee]

How do I use environment variables with this method?

[herbramos]

Great video. I would add that you should not make assumptions about your audience's experience with AWS. You jump straight into the serverless.yml file without describing what it is.