Dockerize and Deploy React JS App in 15 Minutes 🔥🔥

has it ever happened to you that when you have sent someone your GitHub repository and instructed them that you'll need to do this this this steps to run it and they're just not able to run it and then you'll have to say it runs on my machine to avoid this situation we have something called Docker where you can simply send them your Docker image and they can run your app or whatever they're trying to run with just one command let me show you so let's first understand what is Docker and what does dockerizing your react app means so let's search docker and let's click on get started I'm going to go to the docs and yeah here it is so Docker is an open- Source platform for developing shipping and running applications so basically Docker wraps your app and all of the things needed to run your app in form of an image or maybe a container you can say so it's basically your a box that contains your app and everything that it needs to run so let's see how we can use Docker to containerize our react app and we can just send our react app to to anyone they just have to run one command and they can run your app just like that but before we do that hit that subscribe button right now if you want to see more such videos like this because you won't find content like this anywhere else on YouTube so first of all first thing first we need to install Docker so let's CLI on get Docker and Docker desktop for Windows because I'm working on Windows right now so let's click on Docker desktop for Windows so yep it's downloaded let's click on the installer and as you can see I already installed Docker in my system so it's telling me that existing installation is up to date so I'm going to close it but you can go on and install Docker if you're having some problems you can go through this documentation simply so let's see if our Docker is successfully installed or not so I'll say Docker D- version D Dash version yep you see Docker has successfully installed and after installing Docker try to restart vs code and let's see if uh we have Docker desktop over here yep there it is cool then and now over here simply I'm going to clone one of my projects so this is essentially a greetings app that I've created in this tutorial over here and if you want to learn how you can create this app yourself you can click the link in description down below and watch that tutorial and let me just open that folder over here here it is here is our project open so let me just show you if I just say npm install it's going to install all of our dependencies over here inside of our node modules folder and to run this project we're going to need nodejs already installed in our system so we have to first install nodejs and then we have to do you know we have to clone this and we have to do npm install all of these things but with Docker I'll show you that you don't need to do any of these things you just have to run one command and this app will be up and running and great it has installed let's say npm run Dev and this will run our app let's click on this Local Host 5173 and yep you can see our greetings app is is up and running if you would like to build this app yourself you can click the link in description down below and watch my i18 next tutorial with react so cool let's skill This Server and now to containerize this application inside of Docker what I'll do I'll create a new file over here in the root of our fold uh folder so Docker file and this Docker file will contain the steps that we need to perform to run this application that we just now did so first of all we have to install nodejs right so I'll say from node and this node over here is basically the official node image from Docker which we will select let's say if my node version is let me just search node DV my node version is 20 so my node image is going to be this so I'll say Docker node image inside of over here we have a bunch of different node images over here right so I'm going to choose 20 Alpine because this is a lightweight node image that we can use into our project so I'll say 20- Alpine okay now after this see Docker image is basically an isolated environment right it's like an empty folder you can install things inside of it and you can create folders and stuff so what I will do I'll say working directory I'm going to create SLA folder inside of our Docker image and then I will copy our package.json file package star. Json so what this star basically means is anything starting with package so it can be package Json it can be package log. Json right so I'm going to copy this to dot so we're copying the package.json to the working directory over here over here if let's say you're working with typescript and you want then you want to copy like TS config Json and all you can copy this over here as well but since we don't have that so we don't need it so now simply what I'll do I'll run npm install over here so I'll say run npm install this will essentially install all of the dependencies inside of our package.json file so okay everything has been installed now what I can do I can just take everything inside of it and just copy it to our working directory so I'll say copy from dot two dots basically source and destination but we don't want to copy this node modules folder right so I'll just create a new file over here called dot Docker ignore and here I can say nodecore modules because we don't want to copy the node modules after this after everything is copied I'm going to say Expose and then the name of the port so what's the port over here 5173 so our app runs on 5173 right so I'll say expose Port 5173 from that Docker image and then in the end simply we can either do run npm run Dev because that is what is required to run a react wheat setup right over here either we can say that or we can say CMD and we can add the command over here so I'm going to say npm comma run run comma Dev just like that and also we need to do one more thing over here in our package.json after this wheat script we need to add Das Das host to 0.0.0.0 so that it can run on any machine and over here we successfully written all of the steps that will be needed to run our react app so great let's just try to run this so simply for that I will have to first of all I'll have to build this image so I'll say Docker build and I'm going to give this a name so I'll say DT react-app colon Dev and where is our Docker file located so it's located in this folder only right so I'll just say dot and let's run this and notice make sure your Docker instance is running in the background so you see it's going to start performing all of our steps it's taking the node image from its registry that is node 20 image and then it has set the working directory to app copied our package Json files and and now it's running and PM installed to install all of our dependencies so our dependencies are being installed at this point okay now it has done so now it's going to copy everything from source to destination and it is done great let's try to run this so simply what I can say Docker run- p and so which Port do we need to expose this one right 5173 so we need to take this port and inside of our system we can map it to some Port let's say if we want to map it to 3,000 we can run our app on Local Host 3,000 then but we're not going to do that we're going to just map it to 5173 only and then we can specify what do we need to run what image do we need to run so first of all before doing this I'm going to check our images so Docker images and yep you can see this is our image that has been built if we go to our Docker desktop over here you can see here is the image that has been built cool then let's try to run this I'm going to say Docker run and then we need to give the name of our Docker image we can either say react app Co and Dev that we gave or we can just use this image ID over here as well so let's just use this and try to run this and yep you can see our app is running let's click on over here and great our app is running successfully now if you're enjoying this tutorial up until this point open your Instagram app right now and search roadside coder and hit that follow Button as hard as you can because I'm very active on Instagram and if you have any doubts any queries or just a normal message you can ping me on Instagram for this so go on do it I'm waiting what I'm I'm being serious over here open your Instagram app right now and follow me there oh you've already done it okay let's let's move on with this video okay so now that we have a Docker image built over here what we can do we can either deploy it in on some cloud or we can click on over here and push to HUB and you know share it with the world or share with anyone else who wants to run this in their local you can go through the Docker docks to learn more about this so if you go on over here and if you click on this publish your image you can learn their guide over here it's very easy but now what we're going to do is we are going to publish it into a cloud we're not going to have to push it to any Hub or anything we're just going to do it right here from our terminal and for that I'm going to use a tool called acon and you can open that tool by clicking the link in the description down below so let me open it up as well and yep here it is so it's the simplest way to run and share your app and all it needs is a Docker image to run it so if we click on login and quickly we have to sign in with GitHub and anyone create an account on aor for free with their GitHub account so let's click on sign in and I'm in so our acor account has been successfully created great let's go to the documentation and see how we can install acor so if we click on over here C installation and upgrade so since I'm using uh windows we have to use something called scoop to install Aon okay let's first see how we can install scoop so I'm going to say install scoop and okay let's go over here scoop. sh so this is basically a command line tool for installing some dependencies so simply we have to copy both of these lines so let's copy it and make sure you run this in your Powershell so I'll open a new terminal over here for Powershell and paste both of them and let me just remove this uh tag from here and press enter and yep you it shows that scoop is already installed yep it's already installed in my system okay let's close this let's install Acorn now okay let's copy this and paste it over here scoop install Acorn and this is also actually already installed in my system so it's going to show I guess something like that okay it's uh already installed yep you can see cool then let's just uh shut it down and yep we're back in the same terminal let me just kill the server by pressing contrl C or you can uh what you can do is you can go to Docker image Docker desktop I mean and stop it manually from here and I would suggest try to restart your vs code for the changes to take effect so let's see if the acon is installed successfully so I'm going to say acor and press enter and if you see something like this yep Acorn is installed successfully and now let's go back to our documentation of acor and uh let's click on authoring acor if you go to overview so you can see the primary goal of the Aon file is to quickly e and easily describe how to build develop and run containerized application so what we have to do next is we have to create a file over here called Aon file just like Docker file we have to write some instructions over here on how we need to run our app and it's very very simple I'll show you so if we go back to docs it says that we have to create an object like this so container and inste of this I'm going to mention my app so I'll just create a container over here containers insert this object app and inside this app object what we have to do we have to build our app and push it to the cloud right so yeah let's see they have given this name bar so now inside of it we have to use this build key so I'll say build inside this build I'm going to say context and it will be the current directory so dot after this after build I'm going to say Port so what was the port of our application it was 5173 so I'll say publish inside the of double quotes I'm going to say 5173 SL HTTP so you might be thinking how will I know what to write over here right so okay if we go back to these docs you can see we have this complete documentation where you can know how you can write the ports what you need to expose in your app and and we have bunch of different fields over here like for example if you have any environment variables that you want to you know expose then you can write them over here as well so cool and also one more awesome feature of this is let me show you I'm going to write if args dodev that is if this is in the development mode if our app is in the development mode then I will say DS D and inside of it I'll take it from the app directory to the current directory so what this will do is let's say our app is published to some URL and you're in development mode so if you're going to make some changes in your file let's say if I go on over here and make some change in my app.jsx it is going to reflect that change into that published URL as well in just a few seconds so I'll show you so we have successfully created our acon file over here and if you want to learn more about it how to you know add more things in the acon file definitely go and read more from this documentation over here I will mention this in the description down below so now simply what we have to do first of all we have to login with Aon so I'll say Aon login and it's going to go here and since we have already logged in it should uh just pick that up yep it's logged in we can close it now and in our CLI you can see we have logged in successfully now all we have to do to run our app is acor run- I DN app and where is our app in the current directory dot so if you press enter and oops I've made a mistake over here this will not be an object actually if we go back to the docs you can see it's just colon and after that you have to Define your app so I'll just uh take it up there and this will be ports not Port also one more thing make sure uh to delete your node modules from over here I think it causes some problem while you know running this command so just try to you know right click and delete your node modules which I have done over here and let's let's try to run this yep you can see waiting for Builder to start okay and it has taken our Docker file inside of it and it's doing whatever the instructions that I've given inside of this Docker file over here okay exporting to image pushing to layers if we open our dashboard over here you're going to see it's going to soon start reflecting that here as well so let's just wait for it to finish okay I think this should work let's go back to our dashboard and refresh yep you see our image is successfully deployed over here if we go back you can see it has given us this link I'm going to click on this follow link open and amazing our app is successfully deployed on the cloud and you can just take this link and share it with the world with whomever you like so this is currently in the dev mode right so if you see over here I ran it with the dash I tag so- I tag means it's in the dev mode so over here let's say if we want to make any change inside of our app let's say in the app.jsx um over here I'm going to say road side coder and let's save this you're going to see it's going to start syncing it in real time and it's going to update our app over here yep you see and this is a deployed app this is not a local app you can share share it with anyone and they can also see these changes reflect in real time but there's one problem over here that when you will shut down this server this is going to shut down our image as well it's because simply this was running in the dev mode so let's just delete this Dev image from here and let's deploy it for good so I'll just remove this Dashi tag and press enter and okay it has started building this and taken in our Docker file and Docker ignore file and started building our app it's initializing a new pod for us and yep you see our app's link has been generated over here if we click on and open our app is successfully running if we click on over here yep all of the functionalities of our app are working flawlessly great and you can see our server is also not running so that means this app is running for good now if I go back to our dashboard it's showing over here 1.9 hours until stop because we are currently using their free tier and but the good news is if you go on over here and click on change you can see they have multiple different tis over here and the best part is that you can request the free beta access to their Pro Plan right now but in the free or the personal tier as well you can see we get a lot of benefits like Max 4GB total RAM for containers and other benefits as well which are mentioned over here so definitely click the link in description down below and check out acor also if you want me to create a complete tutorial on Docker you can let me know in the comments down below and I will bring a complete in-depth tutorial on Docker as well so that's it if you like this video give this video a huge F Thumbs Up And subscribe to the channel for more such awesome tutorials

Channel: RoadsideCoder

Views: 30,797

Keywords: react, dockerizing react, react with docker, dockerize react application, docker react, react app in docker, dockerize react app, dockerize react, deploying react app, dockrize react, dockerizing a react application, docker-compose, docker compose, docker-compose.yaml, docker and react, react and docker, react project tutorial, deploy react apps, deploy react app to cloud, react app deployment, react js deployment, react app aws deployment, docker with react

Id: dfTco9hmXEM

Length: 17min 56sec (1076 seconds)

Published: Sun Jan 21 2024