How To Deploy A React App - Using NGINX & Linux

Рет қаралды 77,317

Күн бұрын

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

Пікірлер: 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.

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

@andresbreuer 2 жыл бұрын

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

@fustigate8933 2 жыл бұрын

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

@JulioCArce 2 жыл бұрын

Thank you so much Tim for this help!

@AlexHerlan 4 ай бұрын

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.

@laxmisiddayyanavar2132 7 ай бұрын

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

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

@engsambath Ай бұрын

Great video Sir, Thank so much!

@1995taunus Жыл бұрын

Thank you, Tim, for the great video!

@user-dx1nr7tj8c 3 ай бұрын

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

@abdellahbrahimi7217 Жыл бұрын

Thank you, it did work for me.

@liamneesan9712 Жыл бұрын

it works smoothly. thanks brother

Жыл бұрын

Great tutorial! Thanks a lot!

@faneto9608 2 жыл бұрын

Amazing! Loved it

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

@JULI0 2 жыл бұрын

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

@DecodedLar 8 ай бұрын

Thanks! Holy crap you are AMAZING!!

@smellslikerock 7 ай бұрын

Thanks a lot buddy!!

@imbesrs 2 жыл бұрын

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

@user-bq1vr3fp7q Жыл бұрын

awesome, thanks a lot

@EmperorStorky 2 жыл бұрын

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

@elco7956 3 ай бұрын

Super interesting stuff

@hamzazahidulislam3490 Ай бұрын

Thanks

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

@lucassappey3387 Жыл бұрын

Awesome !

@AndrewSurblys Жыл бұрын

Great Video

@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

@Coder-Journey Жыл бұрын

THANK YOU IS NOT ENOUGH!

@kadeus Жыл бұрын

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

@JadeT2539 Жыл бұрын

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

@proxy_learning 2 жыл бұрын

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

@ayushbhattacharya 5 ай бұрын

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

@vishnuvardhanuppunuthula2789 2 жыл бұрын

Tim is great🔥

@spacedud7911 2 жыл бұрын

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

@pedropereira8178 2 жыл бұрын

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

@clarkjack0 2 жыл бұрын

billionaire energy with these videos 📈

@anonymouse5842 10 ай бұрын

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?

@belalmuflih5116 Жыл бұрын

man i love u

@belalmuflih5116 Жыл бұрын

also no am not gay

@hamzazeghari1703 Жыл бұрын

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

@zend112 Жыл бұрын

Gitlens probably

@alaskandonut 2 ай бұрын

You sound exactly like "The Tesla Space"

@suchethkumar8998 2 күн бұрын

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 Ай бұрын

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

@itsyaboivoid Ай бұрын

yeah

@jaysongonzalez8227 5 ай бұрын

How do I stop it from running?

@cidhighwind8590 Жыл бұрын

$60 a month! Thats insane.

@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

@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

@renzodamian724 2 жыл бұрын

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

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