How To Deploy A React App - Using NGINX & Linux

Подписаться 1,5 млн

Просмотров 79 тыс.

50% 1

Hello world! Welcome to a new video! In this video I am going to be showing you how to deploy a React application to a remote Linux server! We're going to use a piece of software called NGINX which is going to act as our web server, and then from our local computer we will create the React application! I will show you how to write a very simple deployment script that will automatically push all of the code to the remote server! Sit back and enjoy!
💻Thanks to Linode for sponsoring this video! Sign up for a FREE Linode account today and get an $100 60 day credit: linode.com/techwithtim
💻 ProgrammingExpert is the best platform to learn how to code and become a software engineer as fast as possible! Check it out here: programmingexpert.io/tim and use code "tim" for a discount!
📄 Resources 📄
Download Git Bash: git-scm.com/downloads
Check Out The Linode RU-vid Channel: / @akamaideveloper
Hosting React Application (Linode Guide): www.linode.com/docs/guides/ho...
⭐️ Timestamps ⭐️
00:00 | Introduction
00:55 | Linode & Server Creation
05:06 | Securing Our Server
08:48 | Configuring NGINX
14:58 | Deploying React Code
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
👕 Merchandise: teespring.com/stores/tech-wit...
📸 Instagram: / tech_with_tim
📱 Twitter: / techwithtimm
⭐ Discord: / discord
📝 LinkedIn: / tim-ruscica-82631b179
🌎 Website: techwithtim.net
📂 GitHub: github.com/techwithtim
🔊 Podcast: anchor.fm/tech-with-tim
🎬 My RU-vid Gear: www.techwithtim.net/gear/
💵 One-Time Donations: www.paypal.com/donate?hosted_...
💰 Patreon: / techwithtim
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
⭐️ Tags ⭐️
-Tech With Tim
-How To Deploy A React App
-NGINX
-What is NGINX
-Linux
-React Application
⭐️ Hashtags ⭐️
#TechWithTim #ReactApp #NGINX

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@judahjosjacinth 5 месяцев назад

This tutorial is an absolute gold mine to learn about deployment to a VPS. It was also a massive pleasure to learn a tad bit of shell scripting. Thank you so much Tim for this incredible work, you're doing a great work and I thought you ought to know that!

@NotForLong Год назад

okay so you are telling me that I do not need to use amazon's deploy pipeline to make the deployment of our apps, with just building a bash script I will be able to do it and then copy the files to any server???? AMAZING!!

@michaelmwanza8724 Год назад

great tutorial thank you so much you have no idea how much I struggled deploying my final project before.

@fustigate8933 2 года назад

I just switched to linux and was looking for a project, this is it!!! Thanks Tim!

@andresbreuer 2 года назад

I´m so greatfull for this tutorial!!! Thank you so much Tim!!

@vishalbalani1068 6 месяцев назад

Thanks a lot for your video and help!! I was able to successfully deploy the frontend code to an vm server. I will work on backend but your video precisely helped me compare to other videos!!

@AlexHerlan 5 месяцев назад

Genuinely an amazing, consice, straight to the point and perfect for my skill level explanation of everything. Even with all the crazy devops app hosting and deployment services that exist now, for easily deploying apps like this, i still appreciate doing it the "old fashioned" bare bones debian linux VM way, so this was perfect. Thabk you.

@JulioCArce 2 года назад

Thank you so much Tim for this help!

@1995taunus Год назад

Thank you, Tim, for the great video!

@bugglebegger143 8 месяцев назад

amazing tutorial. thanks man. linux is extremely hard at first but with this and some other stuff i successfully got my app up.

@imbesrs 2 года назад

Your videos are coming out literally at the perfect time with where I am with my learning lmao

@JULI0 2 года назад

You should make a tutorial on transferring Figma mock-ups to actual code with React

@user-dx1nr7tj8c 4 месяца назад

YOU'RE A MASTERPIECE MAN, THANK YOU SO MUCH!!!! I LOVE YOU BRO I LOVE YOU ,YOU SAVED MY LIFE!

@laxmisiddayyanavar2132 7 месяцев назад

Thank you so much,,,,,,i struggling for this 1 month now its working fine 🎉🎉

@freedomahead7 Год назад

You should do a video where you do the exact same thing but with react deploayor ssh-deploy-release, going through config would be amazing!

@engsambath Месяц назад

Great video Sir, Thank so much!

@faneto9608 2 года назад

Amazing! Loved it

Год назад

Great tutorial! Thanks a lot!

@liamneesan9712 Год назад

it works smoothly. thanks brother

@abdellahbrahimi7217 2 года назад

Thank you, it did work for me.

@DecodedLar 9 месяцев назад

Thanks! Holy crap you are AMAZING!!

@aravindswaminathan5320 2 года назад

Some times it happens... I would be trying to learn some new technology... And there will be TIM posting videos on same content... It just happens... This one is really amazing... Thanks tim.. Big fan...

@EmperorStorky 2 года назад

When will you start with the Linode series, you talked about at the beginning? Thank you in advance

@smellslikerock 8 месяцев назад

Thanks a lot buddy!!

@elco7956 3 месяца назад

Super interesting stuff

@user-bq1vr3fp7q Год назад

awesome, thanks a lot

@datokhojava6421 5 месяцев назад

thank you for this video, I have question, is it possible to run more than one app on the server and use ports I mean ip:400 ip:300 ip:500 something like this

@lucassappey3387 Год назад

Awesome !

@Coder-Journey Год назад

THANK YOU IS NOT ENOUGH!

@AndrewSurblys Год назад

Great Video

@hamzazahidulislam3490 Месяц назад

Thanks

@kadeus Год назад

great content learn some about authorized_keys u don't need to write pass every time

@spacedud7911 2 года назад

You should make a tutorial of how to make a text-based choose your own adventure game with turn-based combat.

@anonymouse5842 11 месяцев назад

Hi, I recently completed a project with react.js and sanity for the backend. I followed the steps provided and I got it all right but the problem is I see a white screen after upload, please how can I fix this? I tried uploading it with another react project, (just an informative page and mobile responsive) and it uploads without any issues. I also tried removing the folder that contains a couple of functions like (web3, sanity fetch, Get and Post functions) and I left the home page only without any functions in it. When I remove the folder containing the functions, the project is seen, no white screen. My styling is with tailwindcss but that doesn't seem to be the problem because I used it in the home page and it shows up. Any ideas please?

@ayushbhattacharya 5 месяцев назад

Hey guys, where I can find that series that he talked about in 1:30

@proxy_learning 2 года назад

Hi Tim, Could you make dedicated video about nginx ? As well as simple project related to golang.

@vishnuvardhanuppunuthula2789 2 года назад

Tim is great🔥

@JadeT2539 Год назад

king!!!!!!!!!!!

@pedropereira8178 2 года назад

wtf why did tim post a video about the thing i was searching in the day before the search

@hamzazeghari1703 Год назад

What is vs-code extension that indicate your git commit when you highlight on the code

@zend112 Год назад

Gitlens probably

@clarkjack0 2 года назад

billionaire energy with these videos 📈

@belalmuflih5116 Год назад

man i love u

@belalmuflih5116 Год назад

also no am not gay

@jaysongonzalez8227 5 месяцев назад

How do I stop it from running?

@suchethkumar8998 19 дней назад

Why npm install command not used and directy went to build ? how to learn more like backend and database how can a non IT guy learn all these topics ? I want get into to cloud or devops

@born2die827 2 месяца назад

12:10 don't I need to setup a "server_name" or "location / {...}" ?

@itsyaboivoid 2 месяца назад

yeah

@alaskandonut 3 месяца назад

You sound exactly like "The Tesla Space"

@unknownman5296 2 года назад

Hey tim, please make a video on how to deploy vanilla js project

@Elriogranade 2 года назад

Hi, it does not work for domain name

@DergoMaster 2 года назад

Worked for me

@cidhighwind8590 Год назад

$60 a month! Thats insane.

@renzodamian724 2 года назад

Did you know how many bandwidth does this type of solution will have?

@heisenbergwhite5845 2 года назад

When will programmingexpert be updated? As it was last updated in jan What new topics would be added

@TechWithTim 2 года назад

It’s been updated! Go has been added

@heisenbergwhite5845 2 года назад

@@TechWithTim yes, just wanted to know when the next set of updates would be available and what topics it would cover. Loving the platform

@hamadaali6725 Год назад

when i did all of this i felt like i was hacking XD ...

@vernevens1598 3 месяца назад

WHY DO I HAVE TO USE GIT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!?????????????????????!!!!!!!!!!!!!!!!!!! Why can't you tell me which files from my app I need so I can upload them???

@mohamedzahran6773 3 месяца назад

Thanks for the effort, but I feel this tutorial is useless. You didn't explain anything. Why do you copy your dist folder and not point nginx conf to it instead, why use chmod and chown to change permissions and what do they do exactly? why do you build your app locally instead on on the server?