Deploying a React App on AWS S3

No video

Deploying a React App on AWS S3

Рет қаралды 66,278

Күн бұрын

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.

Пікірлер: 51

@Street.Credit 2 жыл бұрын

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.

@devguyahnaf 2 жыл бұрын

Thank you :D

@cy-borg023 6 ай бұрын

Thanks for this! Extremely useful, direct and straight to the point

@talunguyen9101 Жыл бұрын

Super comprehensive video. Thank you so much ❤

@sivanesh-s Ай бұрын

Thank you! This was simple and straight to the point.

@misaelpereira9679 2 жыл бұрын

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!

@chuckzhai6408 Жыл бұрын

Thank you so much. That's a great video. It make it very simple for beginniner.

@ayush--gupta Жыл бұрын

Thanks for this video and also adding link for aws cli setup

@jaysahu865 Жыл бұрын

Thanks for making useful content ❤❤

@davidobodo3605 Жыл бұрын

awesome video. thanks a lot

@dyl9833 Жыл бұрын

thanks bro, I've come back here like three times because I forget the build step lol

@devguyahnaf Жыл бұрын

I'm glad it helped you bro, and it's fine if you keep coming back xD

@dyl9833 Жыл бұрын

@@devguyahnaf as someone just getting into software dev and AWS, these videos are mucb appreciated

@emmanuelojima-ojo4873 8 ай бұрын

thanks for this

@gfplatinum 8 ай бұрын

you rock, thanks!

@vaibhav388 Жыл бұрын

Thanks bro :)

@EMMA5235 Жыл бұрын

The video is quite detailed. I an just having some issue. what program were you running before?

@haritha9433 7 ай бұрын

Thanks bro

@rhrabin1298 Жыл бұрын

Thanks DevGuyAhnaf

@TheSakibIT11 2 жыл бұрын

Boss big fan

@Y-100k Жыл бұрын

best practic

@neerajmahapatra5239 Жыл бұрын

Great

@kapilricky 2 ай бұрын

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)

@538sureshs7 2 ай бұрын

Can you tell about your backend?

@pascalverdun2879 Жыл бұрын

Thanks for this video, it's very helpful! Can you tell me what linux distro you use? It looks intriguing

@devguyahnaf Жыл бұрын

I use Arch Linux. You can modify Arch to your taste with a variety of customised Window Managers, Compositors, Terminals, etc. :)

@ElieDeek Жыл бұрын

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?

@BrokenFrames 4 ай бұрын

Did you ever figure this out?

@jonathanyee4633 Жыл бұрын

Solid video! Can you do a follow up with connecting this S3 bucket to Route53?

@devguyahnaf Жыл бұрын

Yeah sure, soon

@jonathanyee4633 Жыл бұрын

Putting the team on your back out here

@gabriellacerda3349 Жыл бұрын

i love you

@johnathanhorner6888 Жыл бұрын

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 ?

@kshitijgupta592 6 ай бұрын

What's the difference between hosting on AWS Amplify vs AWS S3? Isn't S3 used for storage

@user-fv6jd4qi2w 2 ай бұрын

how can i add file env in s3, thank you :3

@thanooshan10 Жыл бұрын

Thanks for the awesome video. I've a doubt. Can we deploy multi-page react website with this method?

@devguyahnaf Жыл бұрын

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

@thanooshan10 Жыл бұрын

@@devguyahnaf Thanks mate! & Best of luck!

@user-hz1rp4nk3x 2 ай бұрын

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..

@ol1175 Жыл бұрын

Thanks a lot, where to store my .env files from react?

@devguyahnaf Жыл бұрын

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.

@nurzahanmukta220 2 жыл бұрын

Pawg

@g_pazzini 9 ай бұрын

which one is better to host web app? cloudfront or s3?

@devguyahnaf 9 ай бұрын

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.

@jayantjha7697 Жыл бұрын

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??

@MyBinaryLife Жыл бұрын

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.

@natural_stupidity_ 4 ай бұрын

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?

@francisera1 6 ай бұрын

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

@devguyahnaf 6 ай бұрын

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

@francisera1 6 ай бұрын

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