Deploying A React App To Docker | Become A React Pro

hey guys how's it going I'm back here with another video and today I'm going to be introducing to you guys one of the most powerful ways in which a developer can deploy a react application and by the thumbnail of this video you might already know that this video will cover the topic of containerizing react applications inside of Docker in the end of the video I'm also going to be showing you guys how to deploy a containerized application into a hosting platform and also explain the benefits and negatives of doing deployment like this so with that in mind before we get into the video if you guys could leave a like And subscribe I would massively appreciate it because it would help push my videos to more people and if you're enjoying the content this is like a really easy and small way in which you can actually support my channel so I would really appreciate if you could do so so with that in mind let's get into the [Music] video okay everyone so first and foremost I want to explain to you guys why exactly would you need to use Docker with a react app so what exactly is Docker well one of the best analogies I've ever heard for it is that it is just like any shipping container that you find uh around the world but for software just like how shipping containers can hold any kind of item you want Docker containers can hold any part of your software and deliver it to wherever you deployed the application so that means that inside of a Docker container you can put every part of your application including the code the environment variables the dependencies everything inside of the container and the best part which actually makes the entire difference is the fact that no matter where you deploy this Docker container it ensures that your application will run the same way everywhere so you won't run into the problem that a lot of developers run into which is they say that the app works in their computer but it doesn't work somewhere else because with Docker containers if it works in the container and you deploy the container it will work everywhere making it extremely easy for you to produce develop and share your application this also means that if you want to change deployment platforms and Cloud platforms there you put your application it's very simple because all you have to do is set up your app to work with Docker and then deploy your Docker app to whatever hosting platform you want which differs from if you were to do it without Docker because a lot of Hosting platforms will require you to do manual labor in your code in order to adapt to their platform so it just makes everything from the process of developing to production very simple now another concept that is important for you to understand before we get into the actual deployment and creating the docker files is the idea of a Docker image so similar to a Docker container an image is basically a blueprint for your application it contains everything detailing how your application or your software runs and if we were to compare an image to a a container is that when you build the image the actual project is placed in a container so an image is just the image that you build out of your software and you put it in a container and then you deploy that container you serve that that container so in its Essence the image is just a blueprint for your app and the container is the live app that you deploy so now how exactly are we going to containerize a react app and actually deploy it well first of all I need you guys to install a thing which is docker I need you to install it there is an installer um and an actual Docker desktop it's not required for you to use the de Docker desktop you can have the docker environment in your computer without having the desktop application but I do think it is uh valuable for you guys to have that as well so I'm going to open up over here in my screen um so you guys can see so this is how the app works right it contains a part over here where you can see all your containers that are running all your images everything everything uh that you might want inside of your um project your Dev environments everything and um you can create everything directly from here however we're going to be using the CLI to do everything because what we're going to be doing is containerizing an already existing react application that I have so this should come after you finish your application or even before um you choose when you want to stabilize this but I have an app here that is already done and I'm going to containerize this application as you can see this is a very simple app I'm actually going to run it so you guys can actually see it running it's part of a tutorial that I made in the past where I showed you guys how to build this but as you can see over here this is the app it's a very simple uh application where you can log in you can I I already have login information set up but you can see a list of the most current movies uh and you can rate them and it actually connects with the correct API so it will show everything perfectly and everything works right this is an app that I built before now you can see it's running on my Local Host 3000 this app is actually built using vit so um it works with any kind of react app but just keep in mind that some of the things might be specific for V and I'll explain to you guys when they are so first things first we want to create what is known as the docker file now this file is a file that will be used by US to write instructions for Docker to generate our image it will explain uh what kind of commands it needs to run in order to produce our project and where our project is being served and what the what are the files that we want to access so the way we do this is at the root of my project I want to create a file called the docker file also make sure you have your first decapitalized um and then press enter now I do have the docker extension installed in my vs code so everything here should work accordingly to my code editor so I recommend installing it as well now since a react app actually runs in a server it's a front end but it runs in a server uh specifically in a node server we need to start by saying which version of node we're building this image based on so specifically I'm using uh node version 20 so in order to say that our container will run on this version I'm going to come over here and write from and then specify uh the where what I'm running which is node and then specify the version and I'll put all pine which um is required as well now what we want to do is we want to create a working directory a directory where all of our app and all of the commands will be executed inside um I personally will use one that isn't present already in the application and it will be generated when we when we build our image so I'm going to call it the app directory and the way I'll create it is by saying uh work uh deer and then putting slash app just like this then I want to copy the list of dependencies that I want to install in my app inside of this work this uh working directory now every command we execute now and everything we copy inside uh after this will be put inside of this directory so we don't have to specify any anything else so what I want to say is I want to copy the contents so what I want to say is I want to to copy the contents of the uh package.json uh file inside of my local computer this one over here by saying copy uh package.json and when you say copy package.json you specify where you want to put it now you need to distinguish there's two different places there is our container that doesn't ex that isn't being run right now in inside our local machine and there's the directories from our local machine now the app exists in our container not inside of our local machine so when I say I want to copy I wrote this wrong when I want to copy the package adjacent I also need to specify right over here where I want to put it and I actually want to put it outside of our or inside our app directory right which is already uh where we are because I said work de app and we just put a dot to represent that then we want to install all the dependencies inside of the package of Json uh inside of our container right so I'm going to run the command run yarn install now if you're using npm the command will probably be something like npm install or or whatever depending on what kind of package manager you're using I'm using yarn so to install dependencies from a package.json this is the command that we need and we're just telling our container to or our image to run this then what we want is to copy the entire project inside uh from our local machine which we represent by a DOT into our um container which we again represent by a DOT so now we put everything there we installed all the dependencies so now how do we tell Docker to run this application well we need to First tell what is the uh Port that we need to expose our container so if I look over here into my project um this is a v project like I said and inside my V config I actually specify that I want everything to run on the P 3000 if you're running a create react app it's probably po 3,000 as well you should check depending on what you're running but in my case it's 3,000 so I'll come over here and I'll say Expose and then the port which is 3,000 now this is pretty much almost done we only have one more command to add and this one is to tell Docker how to run our application we exposed the port but we need to tell it how to run and this depends uh on your package djason if you can see mine I run actually with the preview command but most people will just be yarn start or whatever command you have to run your app in my case like I said it will be uh yarn preview um so what I'm going to do is I'm going to say I want to run the command and then it requires a list and you put the commands that are going to be executed um as in order uh inside the list so I'm going to say yarn on the first item and the second one will be preview just like this and this is how I say that it wants and this is is pretty much it for the docker file now one thing we also need to create is a Docker ignore the reason for that is similar to a g ignore uh we don't want to actually keep the node modules file inside um the our do container so I'm just going to put here node modules and it should be working and now that we're done with the actual uh code part of this uh we have to build this image so how exactly are we going to build the image so I'm going to open up my terminal over here and I'm going to close that and I'm going to run the following command I'm going to say Docker build then a DOT then negative T and then I need to put a name for our image not only that but we also need to put a version for it so I'm going to say movie uh tutorial uh cuz that's the kind of website that I made it's a movie website but it's also a tutorial that I made for you guys and then I'm going to put um a Colum and the version of this uh project so it's going to be version 1.0 just like that I'm going to press enter and you should see that it is building the image now how do you confirm that it built the image well you can click on this and actually didn't even open but you can actually check in your Docker desktop uh you should see this is now here so now that we're done writing the code portion of our project um I'm going to show you guys how to actually build the docker image it's really simple all you do is you write Docker build and then a DOT and then a negative T and then you put a a name for your image so I'm going to call it uh movie website uh touch for tutorial and you need to put a version here in this case it will be version 1.0 then I'm going to press enter and it's going to build it as you can see it was pretty fast uh it has all of our commands over here and we can check to see if it's actually working by going to the do Docker desktop and going to the image Tab and as you can see it shows over here uh it wasn't actually created 4 days ago this is definitely a mistake uh I seriously don't understand why it says that uh maybe because I I did test I did test this project specifically and I created an image for it as well 4 days ago but I did delete that image so this is the new one that we just created and we can actually test to see if uh how many images we have in our project while right now by saying uh Docker images and then pressing enter U it just autoc completed pressing enter it should say what images you have as you can see I just have one which is the one we just created It also says the tag and a unique image ID which is pretty cool but not only that it also says the size this is the size of the image that you built and this is what you're going to be putting inside of your container okay so now that we have our image how do I run my react application inside that image well well first of all I'm going to stop running my other react app which I'm running on my Local Host normally and let's run from Docker the way we do it is we say Docker run then we put a negative D which means detach which means it will it we will be able to put other things in our uh terminal it will give you uh an ID for what what's running you guys will see what I mean and then negative p uh and then we put the port is going to be 3000 3000 uh and then you specifically write the name of the image so in our case is this one over here and we also need to specify the version so I'm going to say v1.0 just like that going to press enter and as you can see we got this number this value but most importantly if I open up this over here it is still running as you can see Local Host 3000 and you might be wondering what happened then well nothing really happened other than the fact that we did stop the this from running on our normal Local Host and this is actually running detach from the docker image so nothing is being served right now but it does actually run as you can see this is the whole project that I just created now what exactly is this ID over here well this ID is the ID of the container that we just ran so like I said the image explains what the project is the container is the live version running of the project so if I want to see over here we can go to darker PS This should show all the containers that are actually running and as you can see we only have one uh which was started running uh and it's up about a minute ago um and we can use this specific ID to identify that we can also see on our darker desktop if I go to Containers this should be over here right and yeah we can see it started one minute ago and the port is 3,000 which is pretty cool a lot of cool things happening at once a lot of information right we can even see CPU percentage which is really cool now if we wanted to stop this I would say Docker stop and then the ID just like this and you'll see that if I go over here and I refresh this it won't work anymore because the container stopped running so now we have successfully containerized a react application and what does that mean it means that like I said in the beginning of the video we can actually deploy this app into any Cloud hosting provider uh solution whatever you want to deploy your app and if the support Docker is going to be very easy which by the way most of them do in our case I'm going to show you guys how to deploy it in the sponsor of today's video hostinger so for those who don't know hostinger is a really close friend of the channel uh they've worked with us a bunch of times and I've basically just deployed my applications in hostinger ever since the first time I worked with them like I've said multiple times it is the a cloud provider that I support and I recommend because of the variety of different features that they have more specifically I'm going to be talking about the VPS uh hosting plans that they have because this is where we're going to be deploying our Docker app so as you can see they have a lot of different plans that you might want to use more specifically I will be using uh the most popular one which is the KVM 2 plan which is only $7 a month and they actually have a good amount of of discounts and honestly for the price uh to Quality ratio this is amazing um some of the features that they have such as uh the amount of course uh the amount of ram the bandwidth uh a dedicated IP address and and a and a dedicated malware scanner which which scans all of your files and detects for any malicious content this is a really good price hostinger also uses powerful Hardware like the nvme SSD storage and AMD epyc processors for a very fast and responsive and responsive website performance not to mention that I believe they do uh ensure separate resources for each VPS so like even in shared uh hosting plans uh you're able to get like really high performance I've personally ensured that uh the projects I've deployed into hostinger are running up to scale and honestly with my time deploying with them I haven't found any negative aspects to it and if you're ever worried about scaling uh I think this is a great solution for you as well because uh the vpss that they uh have here they offer really good scalable plans where you only pay more as your website Grows Right so you're not actually stuck uh not being able to scale your servers because uh you chose is a different plan uh they actually handle all of that for you so what I would recommend in this case is we need to get one of the plants so I'm going to get this one over here the KVM 2 I'm going to click act to cart then uh you have to choose uh the period that you want so technically I want for 24 months because it is the best value for your your money uh you're getting 24 months of VPS hosting but uh you're paying way less almost less than half of what you would if you paid monthly so recommend getting this one uh then you need to create your account or log in I already have an account and um I've already actually bought this uh this plan for this video so I didn't have to put all of this but I'm just going to show you guys uh the process you log in and then you choose your payment provider uh they accept basically every kind of payment provider uh PayPal Google pay alipay and even coin gate uh then you put over here all your information I'm not going to click on those inputs so you guys don't see uh but one cool thing is because purchasing this this plan uh we get a massive discount it becomes we save $264 but not only that you guys also have a coupon code using this limited deal you can put over here the code Pedro Tech and you can see that this uh saves us a lot of money as you can see uh it decreased by like $16 which is a pretty good price and it would actually if you guys use this code it obviously helps support my channel so if you are gonna purchase this anyway uh you should use it and by the way it's a limited deal so I would recommend getting it as soon as you can and to end this all you just click submit secure payment uh when you create your account and you buy your plan you'll be actually transferred to the um H panel where you're able to check your hosting plans okay so when you enter the H panel. hostinger.com uh URL this is where you can see all your hosting uh Services you go to the VPS uh tab over here then you'll see probably just one of them I have three but this is the one that I'm going to set up uh the other ones are previous ones that I've had in the past uh this one over here you can see it shows exactly when it expires and you technically don't have an IP address yes to SS H into uh but uh we're going to set all of that up so I'm going to click on setup right over here and we'll see there is a beautiful guide for us we'll click Start now then we'll choose the location for our PPS um like they said you you need to choose a server location that is closest to you or the audience uh that is going to be using your website to optimize performance so I am in North America uh you guys might know I'm in Canada so the closest might be uh Phoenix just like this then I'm going to click continue and um next you will be prompted with uh this page over here which is going to ask you to select your OS template there's a bunch of options as you can see I'll just uh scroll through a couple of them but what we want is the docker template this one over here then I'm going to click on select and it's going to say we need to install a couple things uh the monarchs is the mware scanner that I actually mentioned before uh I'm going to click continue and and now uh it's almost pretty much done uh we now get our VPS host name and uh an option to add an SSH key and also to create a root password I'm going to add an SSH key because by doing that we can actually ensure security for our project uh for accessing this so I'm going to click on ADD SSH key it'll give us some instructions that I'm going to run right now so I opened up a terminal over here we need to generate the SSH key um so I'm going to copy this uh open the terminal again and I'm going to replace this with actually I'll make this bigger for you guys I'll replace this with um my actual um email this will be my business email uh please don't email me here or spam me here uh but I'm going to click um enter it's going to ask us where we want to put this SSH key uh I choose the default one press enter U it's going to ask us for a passphrase so I'm going to add my pass phrase over here uh I'm typing it but on a terminal it won't show so I'm going to press enter it's going to ask for it again I enter it again and as you can see this beautiful image is the one that shows when you you generate an SSH key at least on Mac now if I want to see the actual uh SSH key content which is what we're going to be putting inside of uh hostinger I need to navigate to the SSH directory just like it says here and then I need to open the pub file we can see that there is a file over here oh I should have done this so there is a file over here it is this one over here uh and to open it we can do it in a bunch of different ways I like to actually just display what is in this file by writing cat cat will basically just print out whatever is in this file specifically my SSH key as you can see over here I'm going to copy this and I'm going to come over here and then just paste it I'm going to call this uh VPS key I don't know and then save now we need to put a root password uh I'm going to write mine over here and it's going to ask for a bunch of stuff so I'm actually going to write my actual password um and then click save and continue nice now save this and there's they give us another option just to finalize everything or just click on finish setup which is where we're going to do because everything seems to be working perfectly now we need to wait for the process of setting up our VPS because obviously they need to deploy it um it will take around 5 minutes like they say but I'll be back right when it's over now as you can see uh it is done and deployed so we can actually go to the dashboard and you can see the status of it is running now we can see also our and we can see that the status of it is running now we can also see the V the IP address which is extremely important because it's how we're going to SSH into um this VPS so in order to make this work we're going to copy this go into our Visual Studio code I'm going to close this a bit try to make it not cramped and I'm going to run SSH uh root and then at and put the IP address so I'm going to press enter and um it says that it can't be established uh the key uh is not known by other names are you sure you want to continue I'm going to press enter uh I'm going to say yes just like this and it said that uh it was permanently added to the list of known hosts then I need to put the passphrase for the key so this isn't the password you put for hosting this is the password you put for your SSH key so for me they are different I'm going to press enter and uh hopefully as you can see we have successfully sshed into our um server as you can see it now Tero has uh the name over here now since we are using the docker template from hostinger they actually should have already installed Docker so we can actually check to see if Docker is installed here by saying Docker version and as you can see it has actually installed it now to test to see if Docker is actually running here we can test out uh a test container uh such as the hello world comp container that I believe they have here we can press enter and and as you can see it actually pulled the the kind of mock container that Docker has and it gave us a hello from Docker uh which demonstrates that running Docker containers is working here quick break uh as you might notice it's a different day uh my camera died and while I was recording and um I had to do some stuff after that so uh I'm back here and we're going to start right where we stopped we had just loaded the hello world image and now there's a couple more steps that we need to take but they're very self-explanatory um we need to actually get the all of our project from um our local machine and into uh the remote server the reason for that in like we can do it in a bunch of different ways we could actually build an image and just transfer the image but I want to bring the whole project because then I can develop the project here if I wanted to and also because the architecture of the project uh might be a little bit different uh in our case over here I know for a fact that um I work with RM 64 and uh the machine that we asso into is from um amd64 so we do need to to transfer the whole thing the way we're going to transfer those files from a local computer to uh the remote one is actually pretty simple we're going to go to where our project exists which is inside of this Mo Movies Tut uh directory I have over here it has our darker ignore our Docker file everything and I want to transfer all of this to the remote by using SCP now to use SCP what I want to do is I want to get the path to where this folder exists I person ly know the path so I'm just going to paste it over here but it's basically it will look something like the following so as you can see over here it goes to the r of replication uh mine is inside of documents inside of YouTube projects inside of movies to which is the the name of the project and we're going to copy all the documents inside of here and put them inside of the another folder that we're going to create over here if I LS this you see I basically just have this which came with uh the server but I want to create a folder inside of here and call it movies uh Tut as well whatever uh now we're going to go inside of it so CD movies tou and you see there's nothing inside now over here I want to put all of this inside of this directory so how I do this is I I put a space I say root which is my username for uh SSH I'm going to put at and then I'll put the same command we used uh the same IP address we used for for sshing into the server so we come over here we put this and then over here we just have to put the path inside of the server to where we want to put our files so in our case we're going to put a the the shortcut over here and then movies Tut just like this because it's also called the same thing now we're going to press enter and it's going to ask us for a pass key for our uh SSH key so I'll put it over here and it's going to start transferring uh or not it says it's not a regular file oh I just noticed that I since we're uploading multiple files we need to put the recursive tag so I'll say R over here and then press enter put the pass uh key again and hopefully it will start transferring everything as you can see it might take a bit uh so I'm going to come back when it's done but I'll let you guys know okay um I transferred all my files as you can see over here here it actually took a a good amount of time uh but now I can check to see I'm inside of movie stut so I'll put LS you see now we have a folder called movies T again so let's go inside of that one and we should see our project actually over here yeah perfect now I could build uh the docker image based on this however like I said um we're using different architectures so I did need to convert this and the way I'm going to convert it so we need to convert it make some changes to our darker file now I can directly edit the files inside of my server by just saying something like code and then putting the name of the file I want to edit like Docker file and you'll see that uh oh it says you can't uh uh the command is not found probably it's not installed inside of my server I can install it by using snap as you can see but to be honest I can actually use Nano I'll just say Nano Docker file Nano for those who don't know oh it may also not be installed oh it is but yeah I can edit text files uh by just running Nano and as you can see this is the docker file that we created now the changes you're going to make are going to depend on whether you're using a base image uh that allows you to have multi- types of architecture in our case over here we're using node and node actually allows that and we just have to specify what kind of platform we're using so technically I don't need to make any changes but I'm showing you guys this just in case you need to if you have any doubts by the way leave in the comments in the description and I'll help you guys but in our case over here all we have to do now is I need to I can exit my Nano file by pressing contr X and then over here I'll just build my image by using build X which is a plug-in that comes with Docker uh the upper versions of Docker and I'll say Docker build and then I can specify the platform we're using um to be Linux and then I can say amd64 and I'll put negative T and specify the name of my like the tag and the description of my image so I'm going to call it movie website uh v1.0 just like we did in the beginning of the video and then we need to specify what are we going to be building this image based on which I put a dot because it is the current uh directory I'll press enter and as you can see it is building the image for us and it should specify everything um I'll be back in a second when it's done building just to continue with you guys okay as you can see the image was built and we can check to see if this image is actually here by running Docker images you can see now we have the movie website over here and it was built 51 seconds ago and this is the size which is pretty good and now all we have to do is actually run this so how do we run this I'll say Ducker run then I'll put movie website and I'll say uh v1.0 now if everything is working and I press enter we should have actually created our container you can see it is running it says that it is running on Local Host 3000 but obviously that's not how it works because this is on our actual virtual private server so okay now that it has created the docker image let's check to see if it's if if it exists we'll put Docker images and as you can see it does exist it was created 5 minutes ago as you can see and it already includes the repository name and the tag that we added so now what we have to do is we have to uh run this Docker image um and create the container and also tell Docker to expose it to the port that we specifically put in our Docker file so what I want to do is I'm going to run Docker uh run then I'll put uh- d uh hyphen D because this will mean that it's detached it it we don't have to we can use the terminal after this command is run and then we'll put uh the uh hyphen P for the port and we'll put the port that we determined which would be 300 3000 then we put the container name the container name is going to be movie website uh and then v1.0 just like this we'll press enter and if it works if our container was created we should see our ID now how do we test this well we have successfully done exactly what we did in our computer right we created an image we created we rent that image to create the container and now the container is running remember when we have this in our local machine I could just come here and say Local Host 3000 and I would access the website well the same thing is happening but on a virtual private server a VPS deployed to hostinger so all I need to do is access that specific uh public IP address and with a p 3000 so I just need to come over here and access this because this is our actual public IP address as you can see and this is the port that we're exposing our project so if you press enter you should see the website is now public and you can access this if you want to as well um and it means it's successfully running um like I said everything is working and we can we expose the website to the correct uh link now obviously if you're going to deploy this website I would recommend getting a domain and hostinger can you can help you out with that as well so yeah that's that's pretty much it the best thing about this is like I said you can actually continue developing here and just run the container making the changes so yeah that's that's pretty much it uh I know this was a little bit of a long video but I think this is a very important topic and if you've never learned it I think this video is going to get you pretty well advanced in it and I think it's a good use of your time to learn this as early as possible because it will help you with future development so thank you guys for watching this video thank you also hosting guard for sponsoring this video uh go check them out please use my link it will help me massively and they definitely have a great service and they do have a great service um so I highly recommend them so yeah that's that's pretty much it really hope you guys enjoyed it and I see you guys next time

Channel: PedroTech

Views: 6,509

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, docker, react docker, react deploy docker, dockerize a react app, deploy a react app to docker, deploy docker app, docker react

Id: RL31Kv_PHTw

Length: 35min 51sec (2151 seconds)

Published: Wed Mar 20 2024