Deploy React and NodeJS on Linux

Get the DevOps Roadmap for 2022 here: devopsfordevelopers.io/roadmap
In this video you will learn how to setup a Linux server to host your React + NodeJS application from scratch. This video uses Ubuntu with NVM for providing the NodeJS runtime, PM2 to kee our applications running, and Nginx as a reverse proxy to provide scalability and SSL termination.
I also share with you why I rarely use this configuration for my own apps, and what I do instead.
----------🎥 C H A P T E R S ----------
0:00 Introduction
1:52 Application overview
2:42 SSH into our Linux server
3:58 Create a user account for nodejs
6:10 Git the code for our applications
6:55 Install NodeJS
8:30 Install application dependencies
9:49 Use PM2 to keep our apps running
13:40 Start PM2 at boot time
15:20 Installing nginx
18:39 Verify our setup
22:30 Troubleshooting connectivity issues
24:30 Setting up SSL on nginx
25:50 When to use this setup
28:30 Other ways to deploy
----------👋 C O N N E C T ----------
Discord ▻ devopsfordevelopers.io/discord
Twitter ▻ / wfbutton
----------🛠 R E S O U R C E S ----------
The DevOps Career Guide ▻ devopsfordevelopers.io/devops...
DevOps Roadmap ▻ devopsfordevelopers.io/roadmap
DevOps merch ▻ devopsfordevelopers.io/merch

[@DevOpsForDevelopers]

The DevOps Roadmap for 2022 is available for free at devopsfordevelopers.io/roadmap One of the hardest things about learning is understanding how the different components work together. Using this guide, you start with a topic that interests or relates to you. At the end of the section, other related topics are shown allowing you to pick and choose your own path to DevOps mastery. Check it out and leverage the skills you learn to advance your career as a developer, sysadmin, IT Operations, QA and more!

[@dad30189]

Very nice video Will! I learned quite a bit.

[@DevOpsForDevelopers]

That's awesome- glad it was helpful!

[@minhduc8a21]

Oh my god! This video is amazing. Thank you so much! My problems are gone

[@DevOpsForDevelopers]

Right on, glad you found it helpful!

[@aldenisaac3789]

Ive been waiting for you to do an actual devops cicd project. Looking forward to it. Hope you plan on adding observability to this project.

[@DevOpsForDevelopers]

Aaaaaww yeah! We're gonna have all the bells and whistles before this is done!

[@himanshushukla6451]

Just what I needed rn.Thanks

[@DevOpsForDevelopers]

Excellent!

[@codinginflow]

Damn I would've needed this a few weeks ago 😂 👌

[@DevOpsForDevelopers]

lol. I should've done a shout-out for the inspiration! 🤣

[@prabhmeetsingh6995]

This is what i needed thanks guru!!please make more type of this. Make a video on cicd for multiple ec2 servers with git github

[@DevOpsForDevelopers]

lol. Glad you enjoyed. Got more like this coming down the pipeline!

[@HiddeTieleman]

You DESTROYED this one. Looking forward to your other deployment methods.

[@DevOpsForDevelopers]

Awwww yeah! Thanks!

[@hannibalbarca7915]

We are waiting ! The vid !!

[@DevOpsForDevelopers]

Lol- almost there!

[@MrTouqeerhameed]

Excellent and thank you

[@DevOpsForDevelopers]

You’re welcome!

[@AMM0beatz]

DevOps in action!! 💯

[@DevOpsForDevelopers]

💥

[@OfficialWirusChannelBBC]

Thank you so much!

[@ifuncuran]

helps a lot, tnx!

[@DevOpsForDevelopers]

Right on!

[@user-gw8iz4qf9r]

Does the front end react application is running on port 8080? Whether it must be the same when we run pm2 serve build 8080 --spa ?

[@genosthegreat7870]

24:28 lol Thanksssaa

[@antonevseev2708]

Hey Will! Thanks for the awesome tutorial! Can you please share what DNS Server app you used in your video (timestamp at 22:00) for setting up the custom domain name?

[@DevOpsForDevelopers]

Thanks! It's the DNS app for Synology NAS devices. I use my NAS as a local DNS server.

[@antonevseev2708]

Cheers!@@DevOpsForDevelopers

[@MrFontaineInc]

Do you find it easier to type out the key location versus using a config file in your daily workflow or does it depend on the day/project?

[@DevOpsForDevelopers]

My ssh key location? I always type it out. Decades of muscle memory behind those keystrokes. 🤣

[@SanthoshKumar-dev]

I can only connect with same network but If I tried on different network it's not working

[@fibinjohnson299]

can i use npm run bild in my vs code terminal and later push it into github ropo then pull to this production terminal ...because it is taking too long in ubuntu

[@DevOpsForDevelopers]

I wouldn't. The node_modules folder needs to be built on the system where the application will run. Failing to do so may result in incompatibilities with dependencies. You also want to avoid storing node_modules in your github repo: it's a huge folder that changes frequently. Rely on your package-lock.json file to pin dependency versions

[@chantellebradley6959]

I need to know what the api start script should be for people like me who built something from scratch. I can't get mine working. Keep getting errors.

[@DevOpsForDevelopers]

What is the error?

[@fibinjohnson299]

usually how long does it takes to complete npm run build?

[@DevOpsForDevelopers]

A couple of minutes at most

[@tomaszprazniewski7499]

Any Idea how to deploy after build a few react/node apps on the same ubuntu server? probably using nginx? it could be server on different url IP/APP1 IP/app2

[@DevOpsForDevelopers]

Yeah, using a different path for each using Nginx would work.

[@tomaszprazniewski7499]

@@DevOpsForDevelopers HI May You know why it doesn't work in my case? server { listen 80; listen [::]:80; root /var/www/xxx.xxx.xxx.xx; /var/www/xxx.xxx.xxx.xx i have 2 folders portfolio and portfolio2 which have build react code inside of each path Thx a lot for response

[@dtdionne]

I tried to follow along but i guess the dashboard has changed since 2022. npm run build is no longer an option.

[@chantellebradley6959]

What pm2 command do I run for a plain node ts app when I built one from scratch?

[@DevOpsForDevelopers]

pm2 start "your command here" more info can be found in the pm2 docs: pm2.keymetrics.io/docs/usage/process-management/

[@chantellebradley6959]

@@DevOpsForDevelopers thank you :)

[@7DuRd3n]

I would rather do it this way. Honestly

[@milesyoung5360]

how did he install pm2 globally without sudo?

[@DevOpsForDevelopers]

Use nvm and you'll never install node packages with sudo again: github.com/nvm-sh/nvm Bonus: it's super easy to switch between different versions of Node.js for different use cases!

[@percyai7776]

where are the videos for this deployment in diffrent ways..

[@DevOpsForDevelopers]

I think these might have what you're looking for: kzbin.info/www/bejne/r4TTgH-Zj9aLo9k kzbin.info/www/bejne/qGHLo5Vofd1oicU

[@genosthegreat7870]

18:21 what did u click here?

[@DevOpsForDevelopers]

:wq to save the file and edit vim

[@genosthegreat7870]

@@DevOpsForDevelopers before that

[@DevOpsForDevelopers]

@@genosthegreat7870 I’m not sure, I don’t see where I clicked anything before that. Got any additional detail to help me pinpoint it?

[@genosthegreat7870]

@@DevOpsForDevelopers i figured it out Ctrl c to type in :wq

[@DevOpsForDevelopers]

@@genosthegreat7870 aaaah, I gotcha. Yeah, you have to exit Insert mode in vim to enter the command. Sorry, it’s muscle memory now and I don’t even realize I’m doing it. The ESC key will work as well.