Auto Deploy React & Node.js with Github Actions CI/CD

Today we are going to deploy a react app and node.js to Digital Ocean platform using Continuous integration and Continuous delivery with GitHub Actions tutorial, and Nginx server
★☆★ Digital Ocean $100 Credit: m.do.co/c/53edbc93587b/
★☆★ My Courses: telmoacademy.com/
★☆★ 1-on-1 Mentorship: calendly.com/telmosampaio
★☆★ SkillShare 2 Months FREE : skl.sh/2Q2LsTi
Time stamps:
00:00 - Intro
01:09 - Create Node.js server
03:08 - Create React app
15:35 - Create GitHub repository
16:56 - Push code to GitHub
18:05 - Create Digital Ocean linux server
20:27 - Create SSH Keys
27:05 - Connect to Digital Ocean server with SSH
27:39 - Install Nodejs
29:38 - Install Nginx
31:48 - Create a new user
38:10 - Install GitHub actions runner
44:25 - Configuring Nginx to display our project
49:43 - Run Nginx without SUDO command
51:11 - Create GitHub actions workflows
01:01:05 - Install Pm2
01:02:20 - Start React and Node on server
★☆★UDEMY COURSES:
*The Complete JavaScript Course 2018: bit.ly/2Ci2Fzk
*Modern JavaScript From The Beginning: bit.ly/2Br13BM
*JavaScript: Understanding the Weird Parts: bit.ly/2Epdgu2
*React 16.6 - The Complete Guide (incl. React Router & Redux): bit.ly/2Br2ikq
*The Complete React Web Developer Course (with Redux): bit.ly/2zXq9IH
* React Front To Back: bit.ly/2STDUPo
★☆★Best laptops for Coding:
Acer Aspire: amzn.to/2FJrOVh
Macbook Pro 2013: amzn.to/2NbYIUp
Asus VivoBook Pro: amzn.to/2YgrCUG
Macbook Pro 2019: amzn.to/2Xzi4qG
★☆★Best JavaScript Books
John Duckett JavaScript: amzn.to/2EAEvkj
JavaScript Easy Steps: amzn.to/2VRM4sN
JavaScript Good Parts: amzn.to/2EFul1V
Eloquent JavaScript: amzn.to/2Quq5qH
You dont know JavaScript: amzn.to/2K9I9VX
My Social Media:
Twitter: / devtelmo
Instagram: / sampaiotravels

Пікірлер: 87

  • @qavinizamani5889
    @qavinizamani5889 Жыл бұрын

    How can we overcome an issue, when deploying the website it crashes for a while, does anyone have a solution about that? So that even while redeploying the website doesn't crash, and also when build failed the website crashes.

  • @Telmosampaio

    @Telmosampaio

    Жыл бұрын

    Great question, I'm actually in the process of creating a video that solves that problem, we can use for example load balancers that helps split the traffic between 2 applications, and will guarantees us some zero downtime deployments, so no crashes visible to the users :)

  • @qavinizamani5889

    @qavinizamani5889

    Жыл бұрын

    @@Telmosampaio Great to hear that, I have researched a lot but not succeed. Instead I did my own logic to run two projects if one crashes serve another, using bash script. But I am new to this so hopefully you will come with an awesome solution. Waiting for that video. ♥️

  • @ZafarKarimov

    @ZafarKarimov

    Жыл бұрын

    @@Telmosampaio Sound beautiful, but where this video?

  • @freesyrian6732
    @freesyrian6732 Жыл бұрын

    This is all what we need in order to go ahead and master self hosting our projects, amazing job bro! I appreciate it!

  • @martinmtandi335
    @martinmtandi3352 жыл бұрын

    This was amazing.... watched the entire video in one seating.

  • @drh374
    @drh3743 жыл бұрын

    Sir, you are the best anytime i'm watching your videos, i feel like you're teaching me in person

  • @aphroditesempai2186
    @aphroditesempai21862 жыл бұрын

    Very detailed video. Hope to see a lot from you. Thanks for sharing!

  • @user-mv6if5fn7f
    @user-mv6if5fn7fАй бұрын

    I like your style, smooth and simple, keep going.

  • @mjbarlow1
    @mjbarlow1 Жыл бұрын

    Awesome! best video for explaining this! cheers telmo!

  • @levipahlevi
    @levipahlevi2 жыл бұрын

    Hello sir. I want to say thank you for your concise tutorial. Now I'm able to deploy my project automatically to VPS

  • @user-hi7vl3ob4w
    @user-hi7vl3ob4w2 жыл бұрын

    Thank you for all your hard work on this.

  • @shahriarislam2640
    @shahriarislam2640 Жыл бұрын

    Just awesome video for the full process. Thank you. ❤️

  • @rileysheehan
    @rileysheehan Жыл бұрын

    Incredibly helpful. Thank you so much!

  • @RodnDjokYTB
    @RodnDjokYTB6 ай бұрын

    Thanks, I followed your tutorial and it was succesfully done.

  • @mohammedaamer73
    @mohammedaamer734 ай бұрын

    Telmo, you saved my day. Thanks man.

  • @DnKZone
    @DnKZone3 ай бұрын

    Just what I wanted !!

  • @kevinjoelcelis2478
    @kevinjoelcelis24782 жыл бұрын

    thanks bro, is amazing, i find this tuto and never found one is perfect but this is amazing

  • @avichalpandey538
    @avichalpandey5382 жыл бұрын

    It is the best video for Github actions, just a few things can be improved- It would have been great if we have a file or page from where we can copy the commands you wrote and if you can explain a bit more about commands and yml configuration commands otherwise superb video, the speed was perfect for a newbie like me. Keep up the good work.

  • @ubaidkhan426
    @ubaidkhan4262 жыл бұрын

    Splendid work 👍

  • @ntwaliheritier4222
    @ntwaliheritier42222 жыл бұрын

    Thank you for an amazing tutorial.

  • @user-me4kw7nh8w
    @user-me4kw7nh8w2 жыл бұрын

    Good Job, This is the one that I tried to find one. Thanks

  • @user-gc1rx7gl1k
    @user-gc1rx7gl1k11 ай бұрын

    great video, it very helped me, thank you Telmo

  • @kevalnavadiya5827
    @kevalnavadiya58273 жыл бұрын

    Nice one, i exactly want this ... thanks 😊

  • @boblehmann3185
    @boblehmann318511 ай бұрын

    Thanks a lot for the tutorial. It was awsome.

  • @joe-powell
    @joe-powell2 жыл бұрын

    Great tutorial!

  • @namesare4fools
    @namesare4fools3 жыл бұрын

    THIS IS AMAZING ! I hope you'd make a video of the same project with docker !

  • @MrJony-fv3ev
    @MrJony-fv3ev Жыл бұрын

    someone give him a medal

  • @kimokimo-se3ur
    @kimokimo-se3ur3 жыл бұрын

    Huge effort you did Telmao for this explanation thank you really , if you guys have found other solutions less complicated plz

  • @drith
    @drith2 жыл бұрын

    Damn this tutorial is really good

  • @javierroca4970
    @javierroca4970 Жыл бұрын

    Great video!

  • @anilshresthaa8174
    @anilshresthaa81742 жыл бұрын

    Thank you for this amazing video....

  • @AliHassan-qd7lm
    @AliHassan-qd7lm2 жыл бұрын

    Great tutorial.

  • @saidmaroc8448
    @saidmaroc84483 жыл бұрын

    good work, thanks

  • @arifarslanturk2951
    @arifarslanturk29512 жыл бұрын

    GREAT CONTENT

  • @nadunmaneeshaovitigala8725
    @nadunmaneeshaovitigala87252 жыл бұрын

    this guy save my life :)

  • @christianlisangola9383
    @christianlisangola93832 жыл бұрын

    Very useful tutorial, and bravo.However, it would be very good if you explained in more details some of the code and commands that where copy/pasted from your notes.But, awesome job

  • @kelvinonuchukwu8215
    @kelvinonuchukwu8215 Жыл бұрын

    Superb!!

  • @estebanperez4755
    @estebanperez47552 жыл бұрын

    Thanks a lot!

  • @andrevitor_macedo
    @andrevitor_macedo Жыл бұрын

    Granda Telmo, Portugal tambem tem bons professores pa !

  • @Telmosampaio

    @Telmosampaio

    Жыл бұрын

    Obrigado Andre, Portugal tem que ser representado 😁

  • @havefun5519
    @havefun55193 ай бұрын

    Cool~ so the runner on server is to automatically detect any local push to master branch then server will git pull and run the cicd?

  • @ramazonpardayev251
    @ramazonpardayev2513 ай бұрын

    Hey Telmo this practice realy helpful. Especially for beginners like me I have a questions what is the difference between build CI/CD with docker and without I watched several videos before watching your's. Those are a little bit misunderstable but yours easy to understand can you make video with Docker like this one.

  • @devadn9853
    @devadn98532 жыл бұрын

    Very good tutorial but you don't have the cors problem on local environment ?

  • @braindeveloper4039
    @braindeveloper40393 жыл бұрын

    nice

  • @aphroditesempai2186
    @aphroditesempai21862 жыл бұрын

    Lot of Docker videos are not understandable. Hope you'd post one sooner. Awaiting 🐣

  • @raghupathym25
    @raghupathym252 жыл бұрын

    Excellent, how to do the same for deploying into AWS ?

  • @rubensemprun-rg6dj
    @rubensemprun-rg6dj2 ай бұрын

    It worked perfectly for me friend, I uploaded my app (backend in Nodejs) and just like your steps work perfectly. Now I have a question if you could help me... I have my front end in firebase and my backend I will have in digitalocean, how could I connect with a domain and subdomains both so that they work? Thanks in advance for your advice.

  • @bhavikkalariya4836
    @bhavikkalariya48363 жыл бұрын

    Awesome. This same will work with AWS Lightshail Ubuntu also right?

  • @CodeWithEasyFaris
    @CodeWithEasyFaris2 жыл бұрын

    very good pronouncation

  • @ParasMendiratta
    @ParasMendiratta2 жыл бұрын

    Really nice tutorial. Let me switch from pm2.deploy to Github CI/CD Thanks

  • @abhishekkumar-dd1fc
    @abhishekkumar-dd1fc9 ай бұрын

    Cool

  • @hieutancodeproject
    @hieutancodeproject3 жыл бұрын

    Hi from vietnam

  • @hemantkumar-ug7jx
    @hemantkumar-ug7jx8 ай бұрын

    I am only able to go to /home route in react not able to go to other routes

  • @sammed.sankonatti
    @sammed.sankonatti7 ай бұрын

    Hi. I actually want to send only build folder to the remote server. How can we do that ? Because present approach(whatever you explained) is sending source code as well to the remote

  • @aungkyawkhaing1129
    @aungkyawkhaing1129Ай бұрын

    how to use env file in your workflows when module build

  • @theskepticcoder7883
    @theskepticcoder78832 жыл бұрын

    I love you

  • @sc-nc6bb
    @sc-nc6bb3 ай бұрын

    What is your visual studio code theme?

  • @technoinfoworldwide2329
    @technoinfoworldwide23292 жыл бұрын

    Mern app deploy in aws using cid cd pipeline.please make details video on this ans also cover how to make server fast after launching in aws

  • @weikangkong4932
    @weikangkong4932 Жыл бұрын

    at 47:12, there seems a type "cidcd" at the end of "root" command, why there is no error

  • @2SaltyRecipes
    @2SaltyRecipes Жыл бұрын

    How do you write multiple branches ?

  • @oopss794
    @oopss794 Жыл бұрын

    hi , why you didn't use pm2 restart ?

  • @bigtech5586
    @bigtech55862 жыл бұрын

    Hello, after deploying to my server , I created "uploads" folder where will be the images of my users.but after redeploying this folder was deleted. Is there any way to keep this folder

  • @altalt2241
    @altalt22412 жыл бұрын

    Check react packaging config webpack for build remove the directory name for double folder issue...

  • @muhammadzohaib1751
    @muhammadzohaib1751 Жыл бұрын

    github actions, with complete deployment on nodejs application how we can working on self hosted runners. Thanks

  • @systemengineer5142
    @systemengineer5142 Жыл бұрын

    I did exactly same steps but I couldn't find the _work directory. Am I missing something? DO I need to configure public key of my server to github ?

  • @codingrussell138
    @codingrussell1382 жыл бұрын

    EDIT: Turns out I need to add - run: pm2 resurrect at the end of my actions so it rebuilt the processes that were removed. Maaan, I keep getting an issue where my processes (orphan processes) created by pm2 get removed. It runs fine and throws no errors but the pm2 processes never appear onto my server even thought it seems like they are created okay during the actions running. When done manually using the terminal it works fine. Just not through actions. When the actions are completed I can go into my server and type pm2 resurrect and it works okay.. But I dont want them to be cleaned up. Any ideas?

  • @hirentank9447
    @hirentank9447Ай бұрын

    I got tihs error at last step Creating an optimized production build... The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process. Error: The operation was canceled. Would you please help me.

  • @europevibess
    @europevibess Жыл бұрын

    build is successful but my pm2 process getting stoped after 3 secs

  • @user-bu5mw7jz6m
    @user-bu5mw7jz6m2 жыл бұрын

    Thank for video! I have a question How to pass env variables to react build?

  • @williamschukwuebuka7907

    @williamschukwuebuka7907

    2 жыл бұрын

    I think you add it in environments on the github setttings.

  • @Wassim971
    @Wassim971 Жыл бұрын

    What's the name of your VScode theme please?

  • @shahzaibimran2662
    @shahzaibimran26622 жыл бұрын

    Hi, How your pm2 command is working As I have globally install on server and when trying to run the pm2 command through GitHub actions it say pm2: command not found

  • @alejomakevids

    @alejomakevids

    2 жыл бұрын

    Make sure you're logged inside your server.

  • @Hadzz95
    @Hadzz959 ай бұрын

    why would you put bash scripts into your www directory? you're storing a token in there too

  • @suryateja2524
    @suryateja2524 Жыл бұрын

    GREAT_VIDEO(👋,👋,👍);

  • @487_dakshsingh6
    @487_dakshsingh62 жыл бұрын

    It is showing 502 bad gateway nginx can somebody help me with that

  • @redpin14

    @redpin14

    Жыл бұрын

    I'm getting this too, I haven't found a solution yet.

  • @j0s3805

    @j0s3805

    Жыл бұрын

    @@redpin14 Did you guys fix this?

  • @redpin14

    @redpin14

    Жыл бұрын

    @@j0s3805 yes I eventually fixed it, the default-available file was messed up and I had to follow the documentation on DO’s website to get it fixed. It’s called a nginx server block

  • @abcdefg91111
    @abcdefg9111129 күн бұрын

    20:37

  • @qualityvideos1
    @qualityvideos13 жыл бұрын

    Hey there! Excellent job explaining as always. I was wondering if you can maybe hook me up with a free membership to your website, since I'm starting from scratch that would be awesome to me!

  • @iGameUZ
    @iGameUZ Жыл бұрын

    dude, thanks for video but , where a sourcecode?) r u kidding?))))

  • @kadeus
    @kadeus Жыл бұрын

    instance [ pm2 start 0 pm2 stop0] in yml file use the name of pm2 in your case - run: pm2 restat mywebsite

  • @abcdefg91111
    @abcdefg9111128 күн бұрын

    40:02