How To Deploy A React App - Using NGINX & Linux

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

[@judahjosjacinth]

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!

[@michaelmwanza8724]

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

[@andresbreuer]

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

[@fustigate8933]

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

[@AlexHerlan]

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.

[@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!!

[@JulioCArce]

Thank you so much Tim for this help!

[@1995taunus]

Thank you, Tim, for the great video!

[@vishalbalani1068]

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

[@user-dx1nr7tj8c]

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

[@laxmisiddayyanavar2132]

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

[@engsambath]

Great​ video Sir, Thank so much!

Great tutorial! Thanks a lot!

[@bugglebegger143]

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

[@liamneesan9712]

it works smoothly. thanks brother

[@imbesrs]

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

[@faneto9608]

Amazing! Loved it

[@JULI0]

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

[@abdellahbrahimi7217]

Thank you, it did work for me.

[@DecodedLar]

Thanks! Holy crap you are AMAZING!!

[@EmperorStorky]

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

[@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!

[@smellslikerock]

Thanks a lot buddy!!

[@aravindswaminathan5320]

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

[@elco7956]

Super interesting stuff

[@user-bq1vr3fp7q]

awesome, thanks a lot

[@datokhojava6421]

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

[@Coder-Journey]

THANK YOU IS NOT ENOUGH!

[@hamzazahidulislam3490]

Thanks

[@AndrewSurblys]

Great Video

[@lucassappey3387]

Awesome !

[@ayushbhattacharya]

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

[@anonymouse5842]

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?

[@pedropereira8178]

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

[@kadeus]

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

[@hamzazeghari1703]

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

[@zend112]

Gitlens probably

[@clarkjack0]

billionaire energy with these videos 📈

[@proxy_learning]

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

[@JadeT2539]

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

[@spacedud7911]

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

[@vishnuvardhanuppunuthula2789]

Tim is great🔥

[@jaysongonzalez8227]

How do I stop it from running?

[@born2die827]

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

[@itsyaboivoid]

yeah

[@belalmuflih5116]

man i love u

[@belalmuflih5116]

also no am not gay

[@cidhighwind8590]

$60 a month! Thats insane.

[@alaskandonut]

You sound exactly like "The Tesla Space"

[@Elriogranade]

Hi, it does not work for domain name

[@DergoMaster]

Worked for me

[@unknownman5296]

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

[@renzodamian724]

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

[@heisenbergwhite5845]

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

[@TechWithTim]

It’s been updated! Go has been added

[@heisenbergwhite5845]

@@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]

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]

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?

[@chikanmao8326]

Your videos starting to look like Fireships videos