hi guys welcome back to another video on Docker I'm going to be dockerizing this newly created react project I'm going to show you that how we can dockerize this react project for development environment and the production environment and then I'm going to show you how we can build an image for this required uh dockerized react project and I will be running the container out of that image so I will be using Docker file and the docker compos files for both development and the production uh configurations that I will be integrating in this react project if you are new to Docker if you have never learned uh Docker in the previous video let me show you I created this video a crash course on Docker I showed you that what is Docker what are the different benefits of Docker what are the different commands that you need to learn in order to use Docker for any kind of project and I showed you uh how we can integrate it in a small note project I built that that small node project and converted that note project into a sharable format so check that out but if you are a beginner and still if you want to dockerize your react project I will be explaining each and every step that uh I will be doing in this video for the react project but if you are looking for Theory as well check out this video first of all and then come back to this react project so let's get started and dock Riz over react project so here you can see that this contains the default files app.js and it has the default code uh the jsx written inside it first of all I'm going to try to run if it starts working perfectly because this is the new react project I have just created so I'm going to open up package.json and verify that yes this is the start command so it has opened up this Chrome browser and uh react project is running so locally it's running now I'm going to dockerize it and I'm going to run the container for running this project so let's open up the VS code again and first of all uh I'm going to create a new file at the root directory of this project so I'm going to click on this icon and I'm going to create a file we cannot change the name of this file and I'm going to write Docker file and if we are configuring our project uh with something like a development server staging server or the production server then we can also write Dot and then the name of that particular uh instance for example I'm going to write Dev Dev means for the development all right so in this file first of all you know that uh I need to configure my tools that which tools are required to run my react project first of all the most important tool which is required is the node so I'm going to write a from keyword which is required in Docker file and I'm going to give the node version and then the Varian of this okay and the reason I'm writing this variant because this is the variant I have currently installed in my system let me show you in the terminal uh it's actually 18 I want to upgrade it let me do it so NVM LS and uh I'm going to change it to NVM use 20 all right uh now I'm going to be verifying it again let me write node hyphen hyphen verion and it should show me 20.9 point0 so if the project is working fine in my local system using this node Varan I want everybody to use this Varan for running the image of my react project that's why I have used this variant after that I need to define a work directory for the container I've explained what is container in my previous video container is the running form of the image and image is you can say in easy words a zipped form of any project okay so after this usually we write SL app as a root directory for the container which contains all the required files of this project when we uh run an image okay and it it uh converted itself in the container okay and after that I'm going to copy all the package.json files package staric means that it will also be copied um the package lock. Json file and after that I need to provide the location of the container okay which is the app currently all right so let's come down um so here it's showing an error I'm going to remove it the reason is that I'm going to be adding the dot dot means that we are already inside the work directory of the container and this package.json file and package log. Json file will be copied within this app because we are already inside the app directory of this container I'm going to copy all the files and folders of my local project folder into this app directory of this container so I can simply write dot dot means that uh with respect to this Docker file I I'm referring all the files it includes public it includes uh SRC folder it includes uh this U node modules folder and all these folders will be copied into this uh container directory because we are already inside the app directory after this and I'm going to install all the dependencies which are added in package.json file all right and then I'm going to expose the port by default it is 3,000 port and then I'm going to give the command so uh you know that how we run the project in react first of all we write npm and then I'm going to write run and then I'm going to write the start command okay so this is the development server okay so develop during development I want it to be uh to use this particular command start okay for the for production obviously we need to run the build command and then we need to use some kind of server like the engine x uh to run our project or any server that is supported by the hosting server that you are using all right so let's save it now we can directly use this Docker file to build an image of this project which I'm going to show you and after this I'm going to show you how we can build an image of this file using Docker compose file as well okay so now in the terminal let me clear this out I'm going to show you that how we can build this uh and run this up so in order to build this and I'm going to write Docker and after that I'm going to to write build keyword hyphen T is for tag I need to name this uh image that I'm going to create for this development Docker file okay so I can write the react client which is the name and after that colon and 1.0 is the varant that I can write anything over here all right so once I do it um I'm going to write the path of ER file but it will not work actually okay uh the reason is that I have given the dot Dev extension over here when I change the name of Docker file to something else like dodev dopr do staging then I need to give the file name as well so before after the build keyword I can write hyphen f which is refering to the file name and after this I can write talker file dodev and this is the name of file which it needs to pick up so I'm going to hit enter and it's going to start processing it's going to build an image um and uh it's first going to go and download this node for this particular image so it will take some time so let's wait for it all right so it has completed the buildt process if I show you the terminal so these are all the steps it has actually done and copied from the docker file dodev that we created and uh I'm going to show you all the images currently so Docker and I'm going to write images if I hit enter it will show me that image ID the tag uh which is the version and it was created this minutes ago 6 minutes ago and its size is 1.4gb obviously we can optimize it and uh this is the name of this repository or uh this is an image name that I just added in that command all right so this is the only one image contains in my local Docker uh configuration in my system and now I'm going to show you that how we can run the container out of this Docker image before moving further I just want to let you guys know that in this Docker series I have planned to create more videos like uh dockerizing a complete M Stack project that can have mongodb node Express back end and on the front end we have the react application and with the single command we should be able to run the both back end and front end using the docker compos files I'm going to create that video after that I'm going to create video on dock Rising next js14 projects then I'm going to be showing you how we can configure over projects using the continuous integration continuous development and pre-commit um and GitHub workflows so this is going to be a pretty interesting uh playlist so I would request you guys to Please Subscribe my channel I'm putting a lot of effort creating these videos for you guys all right so now I'm going to show you that how we can run the container out of this image I used this Docker desktop before in my previous video I want to show you that how we can do everything using the terminal but when it will require I can open up the docker desktop as well all right so now this is the name of it and uh this is the tag name now Docker and after this I can write run and then I can write hyphen D this will make my terminal interactable okay and then I need to provide the Port Port that I gave to it was the 3,000 in my Docker file. Dev so Port so I can write it like this so This 3,000 in my local port and this 3,000 belongs to the default Port of this image which is recommended so whenever we try to pull an image from dockerhub we give the actual uh the port which is suggested by that image and after that we are going to con we can convert that into my local so I'm going to write 3,000 at both the places if I want to write it different it's up to me uh on the left side of this column okay and then I can uh after this um I can actually U write the name of that image so the name of of this image is react client and this is the verion 1.0 all right so I'm going to hit enter so it's going to run the container for it and it has U make uh this terminal interactable because of this hyphen D all right so now my container is running I can verify it by writing Docker PS and you can see that these are these are all the containers which are currently running in my system you can see that in the terminal I'm not running npm Run start which is in the package.json file okay um let me show you this is the start command which I'm not running but the container is running because of this command and I can actually Show You by outputting it so these are all the containers which are currently running I can go to this path and uh I can refresh it all right so you can see that it is still working let me zoom in okay so on Local Host 3000 it is still working this is the container this is not the actual Local app which I'm running using the npm Run start command all right so we have dockerized over uh react app using Docker file now I want to dockerize the same development environment using Docker compos file I want to show you each and every step that we do the purpose of this video is to learn okay so but later on it's up to you usually we use Docker compos because we try to have multicontainer applications so one thing more I want to stop this container this is C currently running and I'm going to copy the container ID from here and I can write Docker uh stop and paste the container ID so it's going to get stopped uh within few seconds and uh our container will stop working so let's see uh it's taking some time because uh um we are first time stopping it so I'm going to open up this now the Chrome browser I'm going to refresh this page okay you can see that this container is not currently running because we have stopped the container so it also shows that our container was running at this place all right so now I'm going to create a new file here I'm going to uh write this one and I'm going to create a new file and I'm going to name it Docker compose do yml Docker compose do yml all right so it has automatically picked up uh this icon and it has started uh showing it over here all right so now this in this file I'm going to first give the name the version of at the docker compost and the recent version is 3.8 which I'm going to write over here and after this I'm going to write the services services are the different apps the benefit of Docker compos is that we can have the multicontainer app uh we can uh have the front and back and both in one Docker compos file as well um in the next video I'll be creating a uh converting my full M Stack app react Express and mongod DB application I'm going to show you um the whole step how the professionals and big companies dockerize their applications uh this video is also covering up the major Concepts so here first of all I'm going to give the name of my this application it can be anything okay indentation is very important make sure you add spaces before that if you don't add space uh it will not work fine and after that I'm going to give the path of that uh Docker file uh let me go back let me close it all right so here I'm going to first give the context context means where is the path of that Docker file which I want to run using this Docker compose okay I'm going to write this dot okay so after this I'm going to give the docker file and then the docker uh file dodev this is the name of file which I have created over here all right and uh after this what I'm going to do is I'm going to expose the port all right the benefit of this Docker compose another benefit is that uh once we run this Docker compost file we don't need to write long commands in the terminal as I just showed you that if I just press up Arrow you can see that for building the image of it for running this container I have to write a lot big commands um and in Docker compos file we can put it all together and it will work fine so this is uh Docker compos is actually the configuration for running the container using Docker files which I've just created after this I can give the ports so I can expose it to uh anything let's expose it to 4,000 okay and a default port for this particular image is 3,000 all right and then I'm going to write the volumes volumes are very important and the benefit of volume is that uh we we store uh the the docker data in out of the docker um context means that when we stop the container when we rerun the container it will persist the data okay and for that we have to give the path in our local directory and with reference to the directory of the container so we know that the directory of the container we set in the docker file is the SL app okay and the local directory that we want to use is the same directory of the folder um which we can use we can uh change it as well okay so this is before colum is the local directory path it will maintain the volume the the persistance data and this app is the directory of the container whenever we are going to restart the container um this is going to pick up the uh data which is stored in the local directory so this is how it works okay I'm better going to explain it um when I'm going to rebuild uh my and doize my full stock M project in my next video so stay tuned and do subscribe my channel so after this once um I'm going to copy all the files for data persistent I don't want to store the node modules folder because it is a big folder I don't want to store that so I'm simply going to write app SL node module so it will not be copied in the local directory as a part of volumes okay another thing I just want to show you for learning purpose which is not required currently if we want to pass the environment variables from the docker um environment to any of the components in the react application or the node application or any programming language uh there's a keyword called environment this one okay and in this here we can write like the public key here and after that we can uh give it any value okay so this has become the environment all right we don't need to actually write this thing over here let's add some space uh like this all right and uh after that we can add multiple environment variables over here if we want to add actually we don't have to write like we have to write colon over here all right so these are some major uh things that we need to add in the services and uh build port and volumes are important um if it is required we can pass the environment all right so now what I'm going to do is I'm going to save this file I've saved it and uh I'm going to open up this Docker desktop just for you guys that how it works so currently we can see all the images existing in my Docker and I can click on the containers and uh currently let me delete all the containers from here we can delete it from terminal as well so I'm going to delete this image which was created using the docker build command which I used before all right so I've deleted everything I can show you in the terminal Docker images there are no images exists in my Docker currently which is locally installed in my system now I'm going to use this Docker file I hope that it will work fine right um now I'm going to write Docker compose and I'm simply going to write up here okay but after this uh after writing up it will find find the docker compost. yml file okay so U currently we have only one service all right so let's let's write try this out uh Docker compos so it's going to rerun all the commands which is added in the docker file we don't need to write a big command like Docker build set up Port set up the file name set up the name of the image and all these things it will be automatically picked up all right so once that is done done I'm going to show you that how we can set up the docker files for uh yes let's go ahead um and for production I'm going to create another files for production and using the inine X to start off my react project on the inine X server in my system all right so you can see that it has actually created the image let me go and you can see that it created this image automatically using Docker compose up and it has created the container out of it and it's running on the Local Host 3000 again let's refresh and it should start working in my browser it's it's not loading up let's go and see what happened all right so we have actually exposed it to 4,000 here let's see 4,000 works because this is the local Port we have set all right so we are running on the 4,000 and react is started working and uh this is through the docker compose file and uh this command is what we set in our uh continuous integration in any hosting server and everything will be automatically set okay I'm going to come back in this file again uh but uh before that I'm going to create and set up my project with the let me stop the container by pressing contrl C over here and uh the container is getting stopped uh so I'm going to go and create a new file so I'm going to write the docker file do prod all right so this is the new file I have created and I can copy this thing over here to save over time all right so in this file what I'm going to do is uh this is going to be the same varion work directory is going to be same same copy this one npm install uh I won't be exposing it because I'm going to use uh another image from dockerhub dockerhub is the hosting server of all almost every main technology for all the images okay and for running our project on the production I'm going to write it like as build okay so this is what uh I'm going to be passing to the engine x uh it's uh important that we name it uh this is the version of node that we are going to give through the engine X all right so once uh we do npm CMD this is not I'm going to add over here in fact what I'm going to do is I'm going to run another command which is npm run build npm run build is coming from here for production I have to run this command it's going to create a new folder called build or next depending upon the framework or technology you are using so run npm build um once that is done the second stage is I'm going to pull uh inine X image from dockerhub and for that I'm going to write engine X engine X and the verion of it and the verion I'm going to give it is uh 1.25 you can check out the inine X uh uh page on the docker Hub and you can figure out all the versions available for you to use okay so this is what I'm going to be writing and copy and I'm going to write from and this is where I'm going to give it a name I give it a name build so I'm going to give it a bu and after that um I'm going to take out the local folder directory uh you can see that the current work directory of the container is up and this is going to contain the build folder which is going to be created using this command npm run built all right and after that the default folder that inine X used to run all the files which is inside the build because engine next require the static files when I try to and run npm run build it's going to generate static files within build and engine X require USR SL share sline xhtml this is where I'm copying all the data from this build folder which is stored in the local container uh into this folder structure which is in the inine X image all right um and after this I'm going to Simply expose uh in the capital I'm going to write 0 okay 8 is the default Port of the engine X and after that I can write the CMD engine X and uh let's give it hyphen G and then I'm going to give demon off these these are some commands required by engine X to run the scripts all right so I think that's uh pretty much it we need to do in this file so let's let me verify it again we're downloading node work directory copying this thing and then copying uh dot dot npm install npm run build so I think we are good all right and uh now what I'm going to do is I'm going to run this this image using the docker file. prod and let's see what it does so I'm going to be clicking on let me clear this terminal first of all all right I'm going to press up Arrow to get back my build command that I write before and I'm going to change uh react um let's give it a name react prod 1.0 and I'm going to change the name of this Docker file to uh Docker file. prod and uh we are good to go let's hit enter and then let's see what happens so it's going to generate an image using this file the docker file dopr now okay and um I hope that it's going to run this project on this port uh which I have set to 80 and uh let's see if we are able to run the react project on the production on using engine X server or not all right so build is complete let's verify it from the docker Hub so you can see that images react broad is created which is unused and it was created 11 minutes ago it didn't take 11 minutes I just took a break uh so let's try to run the container out of this image that we have created using Docker file using the engine X and let's see if it starts working uh let me clear the terminal and I'm going to press up Arrow to navigate to the docker run command and here you can see that so here uh we know that it's uh actually the engine X runs on Port 80 and before that I can actually run it on on the 8,000 and after that I'm going to change it to react prod this is the name of this image all right so let's hit enter and I think that the container of this image have started running let's verify it from here all right so it started running you can see that it is showing the port as well so I'm going to open up the Local Host colon 8,000 and let's see if we are able to run our react project on production on Port 8,000 or not uh let's open up the browser let's refresh the 4,000 first of all uh it will not work over here let's open up over here so Local Host 3,000 as well so it's not working let's change it to 8,000 all right so let's hit enter all right so Local Host 8,000 have started working so our production running instance a version of the react app is working now I'm going to show you this is the last step of this video that um the I'm going to convert a new file we can actually uh add uh our production commands directly in this service just like the app da we can create the app prodad Service as well uh I'm going to show you both of these uh steps okay uh first step is to create a separate Docker compos file for the production so I'm going to come over here and create U Docker hyen compose dopr do yml all right so um as I've told you that the benefit of Docker compos that we don't need to write a lot of big commands in the terminal and we can have a multicontainer running using the docker compos file uh so here um I'm going to first of all write the version like uh of Docker compose which is uh 3.8 then I'm going to write the services and I can name it to anything uh app prod and then I need to build it uh build means I need to give the path of my Docker files and the docker file dopr which is the name of file which I've just created actually um I have to add it in the docker file I need to write the path of that over here all right so I've given the path and then I'm going to give the ports to it rather than giving it uh like 8,000 let's try to give it another Port that if we want to add okay so I can uh write let's add the 6,000 okay so like this uh if you want you can add the volumes as well but for production um um I don't think uh we can uh we have to add over here uh it's up to you depending upon the data all right so we are done with this doer compose file for the production um now in this particular terminal what I'm going to do is I'm going to uh run so currently we have two files one is Docker compose one is the docker prod let me clear the terminal if I go up you can see that I simply run Docker compose so if I run Docker compose app it will again start loading Docker compost. yml I need to uh make it trigger Docker compost production file which I just created for that I need to give the name of that file so I can write he F and then I'm going to write Docker compos . prod. yml which I have just added over here and after that I can give it up uh keyword okay so before hitting enter I want to add another flag hyphen hyphen build what it's going to do is I've already created an image of this project uh using the docker file dopr using the docker build command before I don't want to delete that I just want to rebuild that image one more thing that I have come AC cross and this is thing is come in my mind that uh it will download an engine X but Eng X have some config file that is another topic so it will not work on 6,000 sorry for that so I'm going to change it back to 8,000 now U and I'm going to save this file and I'm going to hit enter in the terminal now so it's going to use this Docker compost. prod. yml file now uh refering to this file Docker file. prod and here you can see that uh it has actually created uh the image it was already created uh that's why it didn't took that much time so now it has uh it must be running over here all right so this is an image which uh it actually rebuilt and if I go to The Container so you can see that app prod container is currently running let me un toogle it so this was the development this is the prod uh so let's go to our browser it's not running on 3 ,000 let me change the port to 8,000 now all right so our production build using engine next is running locally uh using the docker container all right uh so we have covered uh pretty much all the topics there are one more thing that I want to explain you that will help you when you will uh start building projects for production so first of all um I'm going to stop this container so it is going to get uh stopped over here and uh here I'm going to stop from here as well okay so I'm what I'm going to show you that if we don't want to create a multiple Docker compos over here we can handle and write everything in one file as well so what I'm going to do is I'm just going to copy this part of code the name of this service I'm going to open up uh the docker compost. yml and I'm going to move back back and I'm going to paste it over here all right uh inundation uh really matters and U currently what it's going to do is we can uh we have actually added two Services ABD and app prod uh with these configuration files so in the terminal now if I try to rebuild an image using the docker compos let's say that I want to write the docker compose up and to rebuild image I'm simply going to to write the build it's automatically going to pick up the docker compos but how I'm going to name the service over here uh the to give you the name of the service in the terminal after the up keyword I can give the name of that service so let's give it the app Dev service all right so this is the service I have given if I don't give the service name I believe that it's going to run all the services which is which are added uh over here all right uh and now let's hit enter and let's see if it starts running on the port 4,000 because I have chosen this service um and uh it's actually rebuilding and it it will pick up from cash it will not take that much time because the image is already created it's just going to rebuild that so let's see what happens so I'm going to open up the browser and uh I'm going to change the port uh before so I'm going to hit enter I think it's already started running so compiled successfully uh it's showing the Local Host 3000 um which is the default in react but we know that the docker is running on 4,000 so I can refresh it all right so over uh Docker is running and uh we have covered pretty much all the topics that were part of this video if you have learned something new do subscribe my channel it will really encourage me to make more videos for you guys and I hope that this knowledge of Docker production development Docker compose adding services will help you build your project manage your projects and in upcoming videos I'm going to be integrating Docker in M Stack project next just 14 projects um I'm going to be talking about cicd continuous integration pre-commit for uh configuring uh GitHub workflow for preter esent Husky um and um all these uh configuration stuff which are essential if you want to become a good developer all right do subscribe again and thank you so much for watching guys see you in the next video and I will be talking about configuring M Stack project using react mongodb Express and node uh with Docker all right see you in the next video guys
