Deploying a React App on AWS S3
Vložit
- čas přidán 10. 01. 2022
- Deploying a React App on AWS S3
AWS is the biggest company at the moment for providing cloud services. They have services for almost every use case, so in this video I will show you how you can deploy your React.js application/site on AWS S3
😀 SUBSCRIBE for more videos! / ahnafzamil
➤ My website: ahnafzamil.com
➤ My Discord Server: / discord
➤ Support me on Patreon: / ahnafzamil
Links
=====
Example React Quotes App: git.ahnafzamil.com/ahnaf-zami...
AWS S3: aws.amazon.com/s3/
AWS CLI configuration tutorial: • How to Install and Con...
Software Used
============
Recording: OBS Studio
Thumbnail: Gimp
Editing: KdenLive
I hope you enjoy this video, I am open to feedback. - Věda a technologie
Super comprehensive video. Thank you so much ❤
Thanks for this! Extremely useful, direct and straight to the point
This was a good tutorial bro. Watched others but this one had exactly what i was looking for and got our test website up in minutes. Thanks my guy.
Thank you :D
Bro! Thanks for the tutorial, i get stuck with the 403 forbidden error i did know that i have a to make an extra policy! You saved my life!
Thank you so much. That's a great video. It make it very simple for beginniner.
Thank you! This was simple and straight to the point.
Thanks for making useful content ❤❤
Thanks for this video and also adding link for aws cli setup
awesome video. thanks a lot
you rock, thanks!
The video is quite detailed. I an just having some issue. what program were you running before?
thanks for this
Thanks bro :)
Thanks bro
Thanks DevGuyAhnaf
Boss big fan
I create a react webpage a vite build. However l, when I upload the files to s3 I receive this error Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "binary/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec. If I upload the files through the cli will that work ? And fix that error ?
best practic
thanks bro, I've come back here like three times because I forget the build step lol
I'm glad it helped you bro, and it's fine if you keep coming back xD
@@devguyahnaf as someone just getting into software dev and AWS, these videos are mucb appreciated
Can you tell about your backend?
how can i add file env in s3, thank you :3
i can restrict visibility using VPN and whitelisting some internal IPs, right? will it still work same way?
(i want to use for internal demos)
Hello, can anyone please help with this problem? In AWS S3, when I opened the static website link, I am not able to view my web page. I checked the developer tools for errors, but there are no issues in the console as well..
What's the difference between hosting on AWS Amplify vs AWS S3? Isn't S3 used for storage
Great
Thanks a lot for your effort.
One thing is that when i route from index to another page i get the "Message: The specified key does not exist."
any idea how to solve that?
Did you ever figure this out?
Thanks for this video, it's very helpful! Can you tell me what linux distro you use? It looks intriguing
I use Arch Linux. You can modify Arch to your taste with a variety of customised Window Managers, Compositors, Terminals, etc. :)
Solid video! Can you do a follow up with connecting this S3 bucket to Route53?
Yeah sure, soon
Putting the team on your back out here
i love you
For some reason, npm start executes successfully and create react app starts but serving the build folder simply opens a blank page. Also, i tried uploading both the build and the actual files but both show a blank page. Any help??
I don’t think npm start will create the build folder, that just opens the app in localhost right? ‘npm run build’ is the command to get the build folder generated.
Thanks for the awesome video. I've a doubt. Can we deploy multi-page react website with this method?
Yes. But that would require some configuration since S3 isn't aware of React Router. Take a look at this post I found: stackoverflow.com/questions/66326106/react-router-locations-on-aws-s3-bucket-do-not-work
@@devguyahnaf Thanks mate! & Best of luck!
Thanks a lot, where to store my .env files from react?
React .env files arent really sensitive as you are not supposed to store secrets in there. When React gets compiled, the .env files also get embedded into the build, so there's no need to put them there.
Pawg
which one is better to host web app? cloudfront or s3?
Cloudfront is a CDN, and S3 is an object storage service. You can't really "host" a website on cloudfront. Rather, you have the option to host it on S3 and then integrate cloudfront with it. But you can go without cloudfront and just do S3 like I did.
I can see my website in the url but when i go to a different page e.g. anotherpage, and it gets appended at the end of the s3 url like "s3url/anotherpage" and there i hit refresh, it gives a Key not found error, how to fix this?
this can be use for a web app? i want to start something that is interactive, with user , login, crud operations... does this work or what do you recomend? Nice viceo btw, thanks
Absolutely. Just have your backend API hosted somewhere else and use S3 to host the frontend. Then make API requests and have your app provide the functionality :D
yhea, I thought of that... but i cant get my front end on in s3, i dont know how to serve env variables to aws.. becouse i use some for cognito userpool@@devguyahnaf