How to deploy a react application to production - step by step process | Crash Course

[Music] hey there everyone had a shear and in this video we are talking about how to deploy a react application in the production now deploying a react application or any other application which is relatively similar to react probably you can say react any node application or a django application or an angular application deploying of these modern application is little bit different from our classic application that we used to build in let's just say PHP in the case of PHP you choose a host for example GoDaddy Hostgator Bluehost or any other whatever you are choosing you just copy your files you just upload them onto your cPanel and that's it voila everything is done but in the case of react application or similar such modern web applications it's not like just copying and pasting all these files they require a little bit more assets and resources to actually deploy these applications because they are using a lot of node in them and probably similar search services so in this video we're gonna see how we can put a react application in the production and I'll show you some of the things which are absolutely important to know first and foremost choosing the hosting provider is actually a little bit different from your regular applications you cannot put these application as of now on GoDaddy or Bluehost or anything like that surely in the future they might come up with a solution for hosting node based application but as of now our hosting choices are little bit different you can choose something between AWS digitalocean maybe nettle if I may be Hiroko whatever you are like to choose you can just go for that now don't worry I'll tell you a one simple choice for this video so that you can follow along in this video and can put a really dummy application on to the production along with me now there are two ways of deploying a react application as I said other similar application I'll just call them as a react application in this case so there are two ways of uploading these applications onto the server one way is when you are working just as a single person it is your first project or you're just playing around with the project and you just want to see how this uploading process actually works how this is being pushed to the production now that's case number one it's actually very simple to do but the case number two is actually a little bit difficult in the case number two is when we are assuming that when you are working with a team or a group of teams and there are more people above you seniors who want to take a look onto your code what you have built up or how the features are working there are more testers so the group environment moreover like a company then how these productions are going to happen now if you are thinking that you'll be the person who is just gonna walk in into the company on the day one you'll write some code and you'll push that on to the production I would say that's cute but that's not how actually things work things go to a variety of different production servers these are test production servers not the actual live production servers and we're gonna see that how that also works now in order to deploy these application we need to create a few accounts on couple of services and don't worry all of these services are absolutely free to use at least to a certain scale and to set an open-source project so you have you will have no problem in following along and this reminds me to the sponsor of this video buddy works we're gonna take advantage of the buddy works free open-source approach and we're gonna learn how to use them as well but I would like to thank specially to the Body Works for helping me in producing such kind of videos where I can walk you through with variety of scenarios and specially the scenarios which are used by multiple company at a production level so thank you so much buddy works I'll tell you more about them as we move forward and as we take advantage of their services now let's go forward on to my computer and let's create a quickly a react application and deploy that onto the production now let's go ahead and create a simple react application and put it to the production before creating so we're gonna need a few accounts so let's go ahead and talk about them so these are the few resources or I highly recommend you to read or whatever you like to do so first is react Docs of course these are important ones so if you'll just walk into the documentation and click on the create new react app that's how we create a react app now I am assuming that whatever the complex application you want to create you can just go ahead and create that install as many dependencies or routing information that you want to have just go ahead and create that we will not be doing that we will be just creating a simple react application will change a text there and all what we are going to do to keep this video follow Abel by almost everyone then of course we are going to need an account on github because we are gonna take a route of continuous production or continuous editing production kind of a thing the approach is really simple as soon as you create a production or you make a change in something you're gonna push that onto github and from the github we are gonna pull that repository on to the net Levi and from the net Allah five we're gonna host our application it's gonna be a really simple process so of course you're gonna need an account on github.com don't worry I'll show you how to do that I'm not creating the account but how to push your application on to the github I'm gonna also walk you through how to push it on to the nettle if I and this is the way if you are working on a very simple application kind of a portfolio website or something then you can push it directly this way but things actually get a little bit more interesting when things are working in a team or in a company level environment and in that case we are gonna use the buddy works pipelining system now when an application is being created it's not like it's being pushed directly onto the production it first goes variety of the test cases as well as test servers so that we can test the application is working fine even seniors are in that application or the company can take a look that how the code is behaving and do we need more adjustment to be done and I need you to create account on all these websites github and net Levi as well as on the buddy works the buddy works have their pricing option pretty amazing for the open source project or anything like that portfolio or something you can just use them absolutely for free there is no charge in them in case you want to use their cloud services then they have these pricing options you can be the judge do you like them or not but I would say I'm a big fan of their pipelining feature and especially their documentation of course they are the sponsor of this video but again and these are such open things that you can just openly have a look on that and they support the deployments on almost everything that you are gonna need from AWS to digitalocean to the get clouds at the Google clouds here Roku natal if I Rackspace so pretty much anything and everything that you're gonna need they support the pipelining system in that alt all I'll talk about more on the pipelining system as we just take advantage of their systems later on as of now we are just using the net Levi so it's good idea to take a look on that and as you can see here they can execute the installation deploy to notify and send message to the slack channel whenever you are pretty we are pushing our application on to the test servers we of course want to notify the entire team so that's why the support of the slack channel is absolutely amazing we'll come back on to the later on that so I expect that you're going to now pause the video and create an account on all of these three so github metella Phi and the buddy works so go ahead and create an account all of that you can pause the video now assuming that some of you did pause the video there now we are gonna just use these three commands to create a simple react application also I expect that everybody is having some or the other version of node installed in your system that's like very much basic I think everybody is having it now fire up your terminal wherever you are having it so I'm gonna just go on to my desktop so let's go on to the desktop oops okay now I expect if you're on Windows you're using git bash because the default terminal of Windows is not really great so go ahead and install the git bash it's a free software ish thing which is available so go ahead and install that now let's use take advantage of this documentation so it says npx create react tap my apps so we're gonna just copy that and let's go ahead and paste that now in some of these cases chances are high that NP X is not going to work in your system so just go ahead and use NPM no problem in that create react app is an application which needs to be installed in your system if it is not just type the command what you have to do is in case you are on a Linux or Mac you have to just say sudo NPM - JEE install create react app it's gonna install the react as a global if you're on the Windows just make sure you open it on as an administrator and Windows user you don't need to type the sudo after typing the sudo in the case of Linux and Mac it's gonna ask you to enter your password once this application create react app is installed in your system I think that too much basic I think you're already having a react application let's just call this as react test one so this is the name of my application so we're gonna just hit the enter and it's gonna say hey it's having some of the issues let me just hit ctrl L and we need to have NP X only so looks like NPM is not and P X is the only thing I think in the recent version of the node n P X is already there so I think NPM is not available now okay so let's go ahead and fast-forward this process of creating the application I'll just fast forward it so now that react application is completely ready to run it I would like to bring your attention to some of these commands that are given directly default ly by the react when is NPM start of course to start it then we have NPM a run build this bundles the application into static files which are ready for production you can actually pack all of these application into classic JavaScript and upload that online server but we are gonna use the little bit modern approach on that okay so there are all the things which all we need now what I'm gonna do is I'm gonna just enter this folder I'm gonna open up my code editor up here so code space dot means open up my code editor which happened to be Visual Studio code in the current directory and that's all what we are having so first and foremost I would love to see what is my react application and make sure you also check this gate ignore and make sure there is slash node modules is there this is absolutely necessary otherwise you will be pushing up too many things onto this so we are not gonna be touching much of the things let's go into app dot GS and what I wanted to do is remove this entire a tag up here just make sure you delete entirely and inside the P tag all I want you to do is just say my awesome react app at learn code online okay so that's all what we are going to do no groundbreaking changes that's all what we want to do now as you can see in the documentation also you can run the command NPM start to start this application let's hit control + tilde to bring in the default terminal of the vs code and we're gonna run that command so NPM or we can just say NPM start I guess so let's wait for a couple of seconds and there we go our application is ready it's hosted on our it's serving us at localhost 3000 come on you can do it a little bit faster there we go my awesome react application at learn code online looks pretty great now we need to put this application into the build mode right now it says it is in development mode so we are gonna put that into the build mode so how to find out that command just go into the package dot JSON and you can see we have lots of script the one is NPM start which react script starts and we have this NPM build as well so we can run this application and then we're gonna see a few interesting things so let's go ahead and I'm gonna hit ctrl C to kill this and I'm gonna say NPM build okay let's go ahead and hit that okay NPM run build there we go now it's running the build and it's gonna give you a couple of options that I want you to see very closely okay come on and there we go now what it's asking me is saying serve - s build so this will build a folder in the react application to be deployed on a static server now this serve is not gonna be installed by default on your systems so again we have to do the same thing for Linux and Mac you have to write sudo npm install - g and serve for the Windows user you don't need to run sudo just make sure your terminal is opened up as an administrator and you have to simply say npm install - g serve assuming that serve is now installed then then we have to do is serve - s and build what it's going to do it's going to a new folder build in your application and now your application is available at localhost 5000 or your IP 5000 it's also copied on the clipboard directly so I think that's really fantastic so I'm gonna just open this up it's gonna look exactly same but this is a build ready application what it has done internally it has converted all of your es6 and all those amazing feature into the regular es5 so that all the static application can be served directly from here so in the build we are having all of this static information available appear but don't worry we are not going to be putting up like copying and pasting belt folder there we are gonna use a better version of it so I'm going to hit ctrl C now to kill this up here now I would like to initialize a git repository here in this entire application so that I can push it on to the github so phase 2 is Rick is now acting up consider this one as phase 1 creating application the phase 2 is making a build version of it kind of a 1.5 a phase 1.5 phase 2 is putting that on the github so github is pretty simple all we're gonna do is first initialize the gates so just say get in it and we are gonna initialize that it says it's already available Gators already here so we're gonna say git add and dot means I want to add all the files into the gate there we go it's done and then I'm gonna simply say get commit and then we're gonna put a message up here that says initial commit there we go it's all done and I can also say get push in case you wish to but right now we need to have a remote you can see that it says git remote add URL what what is this going on I cannot actually push it I want to push it on to a remote server but I don't have any remote server right now so who's gonna come to save our day to save our day we're gonna have a github repository so make sure you go to github.com slash new it will allow us to have a new repository so I'm gonna simply say it's gonna be react test 1 so any random thing that you can come up with just test up for you tube stuff you know and just like that I'm gonna keep this private because I really don't want anybody to see these kinds of tests a testing application to go on my github repository although this is not really my personal one this is like more over a public stuff so I'm gonna keep it private and I'm gonna just create a repository there okay and there we go looks awesome and now it gives you a couple of options we can choose this last one up here to just add it what we're gonna do is we can just simply go ahead and push this up here so we're gonna simply copy this you can just click on this and it's gonna copy all the commands go up onto your terminal and just paste this stuff here and it's gonna push all of your git repository files and everything which needs to be pushed on to the gate server it's not gonna push this node module so make sure you are aware of that once you go up here you can hit a reload there and all of your application is now available along with the readme file and all those stuffs okay so phase two is over our application is now and react and whatever you're gonna do all you have to do is get push and that's it it's gonna push all of your work on to the git repository that's great so far now let's go on to the nettle if I and now we are gonna create a nettle if I website to deploy it on to like that okay so I'm gonna just go on to this and I'm gonna create click on this new site from git once you click on that it will give you variety of options how you want to integrate nettle if I with some people use other services other than github so it's gonna allow you that option as well so I'm going to click on new from git as you can see github gitlab bitbucket so this is allowed I'm gonna click on github and now a pop-up actually comes up to authorize mine is already authorized so no need to worry about that it gives you a lot of options I'm gonna choose for react test one and I'm gonna hit enter hopefully it's gonna find it there we go this is our application I'm gonna select this one up here and interestingly notice it says which branch you want to load in case you know how to work with the branch that's amazing option it also runs this npm run build and build all of this and show advanced and deploys right so published directory is built where everything is gonna build up we're gonna click on deploy site now it's gonna pull up all of your files from the github and we'll deploy up here and as you can see site deploy in progress within a few minutes right now it says Ncube but it doesn't really take much of the time even in the free plans so generous of them then you're gonna see a URL just right here which will help you to deploy your application or we can see the application directly here this is a set up where you are just one man person you want to test how the build process or the production process works but this is not a process which is being followed up into the companies so for that we have to take a couple of more steps and we have to move on to this buddy works we're gonna take that in a second first and foremost let me wait for a few seconds so that our site deployment is actually in the process you can see even this cog wheel are rotating oh that's done quickly I thought we need to just wait for a few seconds I'm gonna open it up in a new tab and there we go my awesome react application it's now on some domain not really amazing if you have your own domain you can link that up in the domain setting probably that I'll do in some other videos if you'll come and down in the below section now let's see how this application is actually pushed when we are working in a company environment which is very important for you to understand and learn because obviously you'll be working in a company where a lot of things are happening in a different way what you have learned in some other courses or even my courses okay so what we need to do I highly recommend to read their documentation pretty much very amazing documentation I'm highly impressed with that now click on the sign in again no charges no credit card no debit card you can use their free services really nice and it says projects activity and people so you can add up your all teammates and stuff like that I'll talk and about that in a minute first and foremost there are no projects in this workspace so we would like to create one of course so let's go ahead and click on create new project and it says you can just push your project directly from github but their options are pretty amazing you can even create a github repository directly with buddy hosting which I like and you have your private get servers now not all the companies use services like github or bitbucket because sometimes they're cautious about their code being leaked even by the companies like very responsible companies like github so they use their own private github servers so once you click on that you're gonna notice that you can add up your project name remote repository SSH key and all of that great options by the way now as of now we're gonna use the github and we're gonna search for our application which is react react test one there we go and I'm going to click on that and now it's gonna synchronize with that and this is the pipeline I'm a big fan of their pipeline feature what is this pipeline it allows us to have multiple of interactions before the things goes even the test production let me show you we're gonna click on this add pipeline and now it says what you would like to name this pipeline so I'm gonna call this pipeline as simply my first pipe you can name it a little bit better I would like this pipeline to execute on the push and that's all I want to do and I'm gonna click on add new pipeline ok now we can add actions to this pipeline these actions are something which makes this absolutely amazing and you can see there are so many options of transferring to the dev ops to run the commands for angular gets me whatever you like to have there are some tools and tasks runner for Gradle grunt all of them this is very very intense and I would say I'm really happy with that ok as of now what we're gonna do we're gonna take and select an action of node J s now here you can see we have couple of options npm install an NPM test as I told you since this get ignore is a very smart get ignore if I can find that in this get ignore there is a name that says node module so what it's saying I don't want you to upload node modules because that's a big directory and this directory can be recreated because of this packaged or JSON file that's why this folder is never uploaded on gate you want to check it see there is no node modules okay so in order to recreate that folder we run this command of NPM install and we can just work on that as of now I'm not gonna run any tests because my application is not having any test cases if I have I can run all of those commands as I said and with a one click of button every time all those tests are gonna be running through so we're gonna click on add this action by the way there are many other apps options of environment and services and variables and whatnot I'm right now interested in in only NPM install click on this add action and there we go so first execution of this is all done we can just click on the add and we can add more of these actions if you just click on that you can see that more actions can be done up here I don't want to do it right now I just want to have it ok so this is my first pipeline and I'm gonna just say that's all all I want to do and I'm gonna click up here ok so this is my first pipeline that we are having and that's all working now let's click on this run pipeline and I'm gonna click on run now what's going to happen now amazingly it's almost like a darker approach not almost it isn't darker approach it's gonna create a SAP a separate sandbox kind of environment for you we'll put all of your application and we'll run here so all of the tests that you have mentioned before going into the production is now going to go up here it is currently installing a node environment for you onto a system and there we go it's like ridiculously fast so this is all what we are having so this is all what we are doing and let's click on manage actions pipelines there we go so this is my first pipeline and it's awaiting for the push right now as soon as I click on a run now and it's gonna push again whatever the updates that I have made up here what's amazing about this is you can add as many pipelines as you wish to have let me show you one more thing I'm gonna click on add new pipeline and once all those test cases are run then I want to push it on to some test metal if I server let's assume that we're gonna click on on Bush again and this is gonna be nettle if I test env test environment whatever you like to name it I'm gonna click on I want to add this pipeline yes I want to have it on push not on the manual or not on recurrently by the way these are great options you can set up a new time whenever you want to have it we're gonna set it on push click on add new pipeline and I want you to do what this time is I want you to have an action of nettle if I okay I can click on nettle if I and it's using the nettle if I deploy option you can set all these actions again and I want to add this action here and that's all what we have to do now click on run pipeline and run now there we go so it's in progress now things are changed a little bit change let me walk you through once this is finished these are like ridiculously fast so it's gonna not take much of the time so let me show you what is happening now now let's see let's click on the pipeline's now we have two pipelines so we don't have to do anything as soon as we are gonna do a push onto the github the first it's gonna do is run all of your tests that you have made onto a separate environment not in your production environment and it's almost like a docker or a container is being created for you for running all of those tests and then you can have a production being fetched through this pipeline so this is super amazing to be done up here all you have to do is come up here onto the push or you can set it like recurrently as well however you like to go and now the application is not directly being fetched to the user which is always a bad idea you always want to test the things first and you can test it through these pipelines these pipelines are used in almost all the companies in one way or the other through one service provider or by the other service provider but these are the things which actually happens in a real world company and you're gonna see them a lot when you will take a job as a react developer or not a node developer there are other options as well you can check them out about Export Import commit commands and but what not I highly recommend you to read their documentation and their free services are pretty generous so I highly recommend you to test out these mine is having just one as of now okay so that's it and all you have to do now is whenever you make some changes in your application make maybe you just want to say my awesome react application at learned code online dot in maybe you want to have it like that you just save it and all you have to do is now just say git push and there we go everything is up-to-date we didn't added it so we need to have git add and we have to say git commit link added all the link was not added and now we can just simply say git push now everything is being pushed on to the server but what you're gonna notice now that since you have added a pipeline there it's not gonna be automatically being deployed onto your application usually if you're working as a one-man army you haven't linked these pipelines then it will automatically being fetched by the neckla fie and start processing and everything will update live on to the website but that's the wrong idea if you are working in a team environment and your application is being used by thousands of people in this case now what's going to happen you have to just push it I want to run it right now please run this one so it's gonna fetch all these applications from the github into this test environment and once all the tests are being passed down it's gonna notify up here that hey everything is working fine no code is being blasted as you were doing it it's working now and now we can run it on to the push and now this will fetch it to netl if I to just run it and I think it has already done it yeah please go ahead and run this now it's fetching it to neckla five servers once we are absolutely sure that this needs to be fetched we are not fetching anything and everything directly up here and once this is being done then we're gonna see it up here let's quickly hit a reload and there we go we have got another one being published and we can now come up here where is my react application click on that there we go we can see react code a plane code online dot in now so there we go again a big shout-out to our sponsor of this video one more time but he works I love their services and I'm pretty sure you're gonna enjoy them as well they are used in the companies quite a lot in the real world production so big shout-out to them and that's it for this video if you enjoyed this video make sure to hit that subscribe button if you want more such videos about what happens in the real world companies or how to do things into a production stage please let me know in the comment section below I would love to create more such videos that's it for this one let's catch up in the next one

Channel: Hitesh Choudhary

Views: 87,193

Rating: 4.8104877 out of 5

Keywords: Programming, LearnCodeOnline, react app, react deployment, git, github, netflify, buddy works, pipelines, buddy.works, buddy git hosting

Id: ZKxvBsGVKR8

Length: 29min 35sec (1775 seconds)

Published: Thu Nov 07 2019