Integrate Docker in Full Stack MERN App - React | Node | Express | MongoDB Integration with Docker

hi guys welcome back to another video on Docker in this video I'm going to be creating a very small M Stack application and I will be dockerizing it using Docker files Docker compose and I will be using dockerhub image for mongod DB I will not be downloading or installing Mo mongodb in my system instead I'll be pulling up the mongod DB image from the docker Hub so M Stack means Express react and node the purpose of this video is to learn docker so the apps that I will be creating for node and react will not be that much big all right so I've created an empty folder and I've opened up in my VSS code meanwhile if you are a beginner if you just want to learn doer let me show you my channel I've already created couple of videos on Docker if I show you view full playlist you can see that Docker tutorial for beginners what is Docker commands Docker file and all the different commands that I'll be explaining you I would highly recommend you guys to start checking out this video before starting off configuring any project with Docker but if you have a little bit understanding about Docker then you are good to go and you can see that I've already created uh a video on configuring Docker in reactjs for Dev and production environment as well okay so I'll be creating few more videos on Docker that can consist of NEX gs14 and also continuous integration and continuous deploy I meant when we integrate Docker in our projects I will try to explain each and every step that I will be doing in this video for configuring Docker in mtech Project along with that I will request you guys to subscribe my channel as you can see I'm putting a lot of effort I've already created 145 videos on my channel so it will really encourage me to make more videos for you guys and also this is the mongodb image from dockerhub that I will be pulling in and use it in my node express application which is the back end all right so let's first start off creating our backend project using node Express and mongod TP so in this folder first of all I'm going to be creating a new folder and I can name it API okay and uh let me get inside this folder from the terminal so CD API and uh I will be initializing it first of all with npm in it and uh it's going to ask me few questions so I'll simply hit enter enter enter API yes let's go and yes so this is created and it has created this default package.json file all right if you are not understanding what is this file I've already created a complete crash course consist of 42 videos on node Express mongodb you can learn that from that playlist I've given the link of all the playlist in the description of this video so inside the API first of all I'm going to be installing few dependencies which will be required to create couple of apis uh because uh for integrating Docker we need to test that if the functionality is working fine or not so I will be writing npm install cores and I will be creating cores Express and then mongus okay so I'll hit enter it's going to create uh a new key over here in this file and it's going to create uh node modules folder and also package lock. Json file because um it this is is the required files that it needs to run the project okay so these are added and these files are created now I'm going to be creating a new file here so I will be writing index.js okay so in this file what I'm going to do is I'm going to create a small server first of all using Express in order to test this out so I will be writing uh require Express okay and then I will be fetching the cores which I have just added so require cores let's add the mongus which I have just added so require mongos and then um I will be creating a new app using Express okay then I will be adding some middleware so app. use course okay and then I will be creating another middleware app. use express. Json all right and uh after this I'm going to be creating a small server so let's uh add that um so this is going to be app. listen and then I can give it any port so our front end app will be running on Port 3000 which is the react default Port so for backend I can give it 4,000 Port okay so let's give it like this so I'm going to be just logging in server is running on Port 4,000 all right so after this uh let me add one default API route so that when I try to test this out on my browser uh it works fine so I'm going to write this one so I can let's give it API uh API SL notes okay um and then I can write the async this thing like and uh inside this I'm simply going to return the response so response uh do status equals to 200 and then I can simply return the Json data so message equals to this is my API okay uh for now I'll just be removing this uh later on I'll be adding it back so our basic setup is here let me try and test this out so LS and yes I'm inside it so I'm simply going to run U node index.js all right so server is running on Port 4,000 let's try to test this out by running local host colum 4,000 SL API sln notes in my browser so let's open this up so I'm simply going to write localhost sl4000 API slash notes and yes our server is running because this is the message I returned from my API all right so now what I'm going to do is I'm going to be creating another file and this is is going to be a mongodb model using okay so I'm going to copy paste the model because this is not the purpose of this video I want to finish up the actual implementation quickly because I want to talk about Docker okay so this is the uh package and I have used mongus do schema U Constructor and then I have uh this uh title of typ string content of typ string and and created at uh will be having default date whatever it is currently okay and then we have this uh model name note this is what I will be importing in my index.js file so let's close this file and go over here and inside it I'm going to be writing node equals to require and this has to be note Okay so mongos and the note note model will be used to fetch the data out of the database of the mongodb and to store the data in the mongod DB um with respect to the model which I have created that has title content and created at properties okay uh after this what I'm going to do is I need to connect to the mongod DB okay so Mongo's connect and uh this is the default URL but currently let's leave it like this uh later on I will be passing this URL as an environment variable from my Docker compos file okay so here I'm going to write use new uh URL parser um true and then use um new you unified all right so unified apology and this is going to be true here all right so let's save it and uh after this um what I'm going to do is I need to detect if I'm able to connect with mongodb properly or not so I'm going to write dot at the end in fact let's try enter so then uh and then console log connected to mongodb and then I'm going to write catch it's going to give me the errors so I can simply write console log and then the error all right so we have actually connected with it but it will not work currently because I'm not pulling any mongod DP image from the docker Hub uh and because of this reason I cannot test this actually okay um so let's leave it like this we have pretty much set up over structure which is the use new URL parser and use new new uh use unified topology these are just uh some required or you can call it optional parameters okay so let's let's save this file so we have actually set this up uh what I'm going to do is I'm going to remove uh let's let's leave it like this I'm going to actually return the data by fetching it from this particular model because we are already connected with the mongod DB okay uh so let's let's bring bring back the async and uh now try and then const notes equals to await note find and after this I'm simply returning the notes from here okay and since this is Json so I can simply write uh this one fetched notes successfully and I can pass another property let's say the data equals column notes all right and uh if there might be some error I can simply return uh let's remove it and uh I can simply add and return some error with the 500 that error fetching notes try again something like that and I'm just returning this error message okay so we are done by writing uh over get API now similar to this I can have the post API quickly uh by writing app do post API noes async so let's try to uh add it so I'm just going to copy this try code and I'm going to paste it and um first of all what I need to do is I need to create U one model property so we can have node and in node Express we know that uh we can fetch the data from request. body okay so I can fetch the title and content from the client and I'll be using Postman to test this out uh for the react application I will just be using this API to get the data the purpose is to sync back and front end using Docker and how we can configure it all right so uh there seems an error let's close it with the parenthesis all right so we have added this now what we can do is we can save this notes within the tri block so we have saved it let's try to add the catch block as well and inside the catch block we can simply return the error message because there is an error message with the 500 um and um I think we are pretty much done we have just saved the notes and then we are simply returning the saved note which we have actually done all right and uh at the end like we can simply add this particular uh route uh that will handle the not found Route so any route which is not found which is other than API SL noes we are simply returning 404 that page not found so we are done with creating a simple small um node express mongodb application uh this will not work because I have not even downloaded mongodb in my local system I have not even connected my mongos with Atlas are online uh database so I will leave it like this for now uh later on I will be passing an environment variable of the DB image from the docker Hub so let's leave it like this I'm going to be creating a new react application parallel to this API folder okay so I'm going to write npx create react app and I'm going to name it client all right so let's hit enter and it's going to download all the dependencies for the react application um and uh and we are going to proceed from there all right so it's creating a new react application you can see that it has created a folder and inside this API folder um I'll come back to it I will be creating a new Docker file as well which is important because Docker compose require Docker file to run different commands which are required which are added uh to install the different dependencies to copy the folders uh from the local directory to The Container which I've already explained explained you in my previous Docker videos if you have a little bit understanding about the topic okay and I'll be explaining you once I will be writing the docker file why I'm writing that particular line in that file okay so currently it's creating that it will take some time I think uh so if I open up the client folder so you can see that it's taking some time all right so project is created for the react I'm going to open up the source folder and I'm going to open up the app.js this is the default UI so whatever the API that I've just created for the notes in my back end I want to call that get API using API notes and I want to use that in my react project and I will be running both of these project using one command I will be showing you uh when I will configure Docker in both of these projects okay so here for this particular file first of all what I need to do is at the top um I will be importing the hooks I hope that you have an understanding of react so use uh effect and use State these are going to be coming from react all right and uh then I can actually import exos which I need to install yet so let's go inside client in the terminal npm install exos I can use fetch as well it's up to you okay um so use effect and use state after this within this app component I'm going to be creating a state variable uh notes and the set notes uh this I can give it null okay and uh then it has actually I'm using the uh tab n u AI assistant so it's just giving me some default uh structure of how we can call some exos so it has it has actually written this so I'm just going to remove this part instead I'm going to to write HTTP colum Local Host colum 4000 API notes because this is where our uh backend server will be running and this is the path of get API okay then and then response and uh here um I'm setting the response. data dot data okay so this is where the response will be received all right so for debugging I can simply log this data out as well so response. data as well all right and uh after this I can actually render this data out okay uh so I'm just going to copy paste to save some of our time of the the complete UI let's let's remove it and uh we have this data so let's copy the notes if notes exist then it's going to map through uh the whole data and it's going to print out the note title and the node content uh so if note does not exist until then it will keep on showing loading on the page I hope that you have an understanding of jsx how react works and how uh these uh these components and hooks actually work so I think there is no error in this file and we are done with the configuration of this file so what I'm going to do is I'm going to open up this API folder for the back end and I'm going to create a new file so this is going to be a Docker file we cannot change its name but if we want to change its name we have we can actually write dot Dev or dot prod after writing the dot dot staging something like that okay for now since we don't have a a Dev or prod files for this particular project um I'm simply going to leave it Docker file okay so uh this file actually used to build an image for this project and through that image we can run the containers okay so first of all what I need to do is I need to give it the tools that are required to run over node project so the main tool that is required is node itself okay so because node is get installed npm will be automatically installed so from I can give it the verion of node so I can write 20 let me check my node verion in my system if it's uh the reason I'm using my verion because if the project is is running locally in my system successfully it will work fine uh on the hosting server as well okay then I will be running the command using run keyword so npm install hyphen G nodemon okay nodemon is used to rerun the server whenever we make any change in the files okay uh react automatically does it but in node we have to use node modon so I'm installing nodemon globally in the container container is the running form of image all right so then I'm going to write the work directory this is going to be the app directory this directory is not local this directory is for the container that we will be running out of that image of this project okay and then I will be copying all the files of this project that are required to run this code the main file is the node.js index.js uh and you can say uh like package.json file um so I can simply write dot it refers all the files in my API directory and then I'm going to write dot after that again this DOT first dot is my uh local files within the app API directory and second dot is the path of the container uh which is the app which I've already provided okay and after that I can run npm install node is already installed uh so um and uh and nodemon is already installed we are already inside the container app directory we have already given when it the path from the local directory structure to The Container app directory structure now npm install will work okay and after that we can expose the port uh so for backend I'm going to give it the 4,000 Port then I'm going to give the command so I can write npm run and then I can write start okay because this is the command um let's go over here and uh I need to modify y it over here as well because I'm installing nodemon so I can write start and inside it I can write nodemon hyen L index.js okay so this command is going to run this command this is going to run index.js index.js is going to run the express server this is how uh the flow is going to work all right so we have written Docker file and for your learning we can have uh just like G ignore we can have the dock dot Docker ignore file as well so inside this file uh what I can do is I can U simply write different folders like the node modules I don't want it to be included uh in the docker image because the npm install will automatically going to generate this and I can also add the package log. Json this is also going to gets created when the docker is going to run npm install from this this line okay so this is just for your learning so we are done with creating Docker file and we can test this out once we write Docker compose command um and the reason I'm not able to test this out uh because uh I need to use image from the docker Hub and uh for that I will be installing that pulling that up in my Docker compose file which will be outside of both of these folders because I want to use one command to run both both of these projects all right so uh let's close this up let's close this doer file as well instead I'm going to copy this and I'm going to paste it in the client folder as well because I need the docker file in the client folder as well in my front end application okay so I'm going to give the same note version um I don't need nodemon it works on the back end uh and I'm going to give this one and I can copy package Json file as well um manually okay and after this I can also copy all the file so it's up to us I'm just showing you different variations of copying local folders into the Container app folder all right so after this uh let's try to install this all the packages of the react and I'm going to expose it to Port 3,000 because by default react runs on Port 3,000 and uh in package.json file the start command will already added the start command so I don't need to modify that so we are done with creating the docker file and um now what I'm going to do is um we needs to create a new file outside this so I'm going to name it Docker compose we cannot change its name make sure so we can write yml or yl uh both works okay so this is going to get more interesting from here I'm going to first give the verion of this Docker compose okay this is the varion currently the latest varion I think uh so after this I'm going to give the services Services involves uh all the dockerhub images that we can make it the part of the service or we can make the local image is as a part of the service so the first thing that I want to add as a service which is independent is to pull the mongodb all right so I'm going to name it you can write anything over here and after this ination is very important I can write the image and I can give the name to it and uh this is actually referring to this name this is the image we cannot change its name it's going to go to this part particular uh Docker Hub and it's going to find uh this particular name so we this is what we have used over here all right and then I need to give it the container name this is this can be anything so I can write the mongoor C so container and then I'm going to give the volumes volumes are used to persist data when container restarts it stops and then restarts then volume helps in persisting data because it stores the data uh out of the container uh in the local you can say the virtual machine of the docker engine okay U so after this I need to give the name of it and um I'm going to add it like this and I need to give the path of mongod DB so mongod DB default path is data/ DB okay make sure you add the exact path which I've added over here and this volume is something which we can add at the end of this file which I need to do so let's wait for that um after this one last thing that we need to add is the ports ports for mongod DB so mongod DB by default runs or 27017 colon and again I'm going to give 27017 so this path uh we can write anything over here um and this is the exact uh Port that you need to write and this is the local Port which will be use running u in the docker container so I just given the same ports so it it does not make any difference all right so mongod DB is uh is going to get installed when I will be running the docker compose but before that let's try to run the docker file of the back end because I'm going to install download the mongod DP and after that I'm going to run the service uh for the back end so let's give the name build uh let's use this uh suggestions which my tab 9 plugin is giving of my VSS code so build so build path I need to give the path of my folder the backend folder and this is the path uh this is the API path with respect to this Docker compos so dot slash and the API the the the path not the this is not the path of this API folder this is the path of the docker file within the API folder okay and uh the container name let's go with it API uh C and then ports are going to be because uh let's give it 4,000 which will be running let's give the default Port that is set in the docker file which is the 4,000 okay and uh then one important thing that I want to show you is depends on okay depends on is so what I'm doing is I want TB to be pulled from the docker hub first of all until and unless it completes its process I don't want this Docker file of the API to start executing because of this back end is dependent on the database to for apis to start working to fetch the data from the mongodb database uh you can write depends upon and give the name of that service which I have given over here all right so I've given this all right and uh then what I can do is I can give the volumes and I can give the environments as well this is where we are going to pass the environment variable so for the volumes I can simply write this and um I need to give the path and then the path of of the container okay and then I don't want to persist data of the node modules okay other than this I want to purist data for all other files except this node modules folder so API which is the local directory and this app is the directory of the container which I gave over here the work directory all right and then I can give the path of it so URL I can give the path ination is very important let's move it forward uh so URL mongod DP uh C actually it's only and then I need to give my DP which is the path which I have added over here uh this this uh we can we can we can name it like this all right um and now we can actually uh run this backend Docker and convert the back and into a Docker image all right so before actually start um adding the service for the client side let's try to test this out um for one more thing that I need to do is if I go to index let's copy mongoor URL index.js I need to remove this and I can fetch that process.env do that particular URL and Docker compose is going to pass this path to this index. JS file all right so in the terminal first of all I'm going to show you if there are any images already installed in my system no there are no images all right so the command that I'm going to run is let's go out of the client folder and I'm going to run the command Docker compose up okay it's automatically going to trigger Docker compose and it's going to run through all of these Services first it's going to go through um it's going to download that from dockerhub then it's going to run this service uh after the mongos is installed because of this depends upon uh this key and then it's going to run the docker file of this API and it's going to build an image of this backend project that we have created it's going to run all of these commands and um also we can uh after that we can run the container to see if our back end is running properly or not all right so let's hit enter in the terminal I hope there will not be any so uh service refers to the undefined volume data in well it compos project so let's see U what goes wrong in it uh we have this which is the name of that service okay so at the end what I forgot to do is I needed to add the volumes which I explained you earlier so I need to add the volumes and this is going to be dat all right so let's save this file now I'm going to run that Docker compose up command again all right so it should start working compiling the data so I will not be pausing the video I will be going through the process that it is so you can say first process is pulling it's pulling the mongod DB image from dockerhub so it's downloading it might take some time um so once it completes the download it will run the mongod DP on this URL which I have given over here all right and once it completes it's going to come to the next service the API and it's going to detect the path of Docker file so it's downloading it's it's taking some time so the size of mongodb image is 254 MB all right so until then let me pause this video all right so here you can see that it completed downloading the mongod DB from that Docker Hub and after that it started running the docker compose file of our backend project let's allow it so I have allowed it to access the files U I have allow this terminal all right so I think it has started running node space index.js file and I have not run this command separately I have simply running the docker compost. yml all right so now what I'm going to do is I'm going to open up uh my browser and try to run Local Host colon 4,000 all right so this is where and I'm going to refresh this and over Docker container is running actually that's why it has returned this particular uh message and there is no data in the mongodb that's why um there uh it has returned an empty array and okay and I can fill this data actually and one more thing that I want to show you I can use the docker desktop and I can show you that m is the name of folder that contain uh both uh C and the apic images which is the container let me show the images so both the images were created and for that images the container started running in the previous video the initial introduction to Docker video I showed you all the uh I think 30 plus commands from the terminal that how we can uh build an image how we can run the container out of that image and all these stuff check out the introduction to Docker video on my channel if you want to learn uh every basics of the docker um and configure it in your system whether you are using Linux Mac or Windows okay so currently this container is running uh let me open up the post man I can I cannot call the Post request from the browser so I need to use the react app or I need to use some kind of Postman stuff to add the data in my database so let's try to add it in my mongodb so I've set the post request I've given the URL and uh in the body I'm just passing the title my note Title One my note uh content uh one uh let me zoom in if I'm able to yes I'm able to zoom in so you can see better all right so in this post man we can actually uh run this particular script all right so let's try to send this out because our server container is running so let's send this out all right so note created successfully this is the data which is returned from the API that we created uh ID and the V note created successfully let me show you so you don't get confused if I open up the index.js you can see that this post request actually gets called um and this is not created successfully and this is the node data that it returned now let's try to refresh this page all right I've refreshed this page now this data is successfully stored in the mongod DP and this data is successfully feted from the get API and this is the data that contains it contains currently I can send it again let me see all right so I've sent it again there should be two datas two objects for the nodes added all right so there are two datas and uh over Docker compos is actually properly successfully compiling the backend project now what I'm going to do is I'm going to stop everything so I'm going to Simply U hit contrl C in my terminal so it's stopping all the containers all right so it's taking some time uh and now it has stopped I can verify it from my uh Docker desktop it has these images so what I'm going to do is I'm going to modify compose and um I'm going to add the service for my client as well so let's write client and uh this is going to have uh uh the path of Docker file for this client is going to be uh dot build and this is going to be uh dot slash and then the client folder and this is where the docker file exists all right so let's go over here and the container name let's give it client C ports what we want to give it to so 3,000 3,000 this is the port uh I'm going to give depends upon uh I can give that unless and until the back end is not running I don't want to build an image for the front end using Docker so I can simply give the name API API is the name of the service for the back end so this is going to wait uh because by default Docker compose is not going to uh run all of these services in sequence we need to add the depends on it's not required but it's up to you if your front end is totally depending upon the back end then you can add it but if the Su content is not dependent upon the back end you want to quickly load and run the front end then it's not required it's not even recommended over here all right so then uh I can simply write the volumes as well so volumes uh is going to be let's give it the space SL client and then colum SL client I've already explained you what these things are doing so this is going to be the client SL node modules all right so I think we are done one more thing that I want to show you to make our terminal interactive uh this is going to be STD in open this is going to be true and then I'm going to write TT y this is going to be true okay uh it's a good thing to add for front end apps um and I think I'm good to go with testing the docker compos now and um this is how I'm going to be able to run both the back end and both the front end using one command one more thing I want to verify let's go to app.js and this is the URL this is going to be returning me the data from the backend server which I'm running uh and the apis are fetching the data from the mongodb as you already know all right so what I'm going to do is before writing the docker compose up I'm going to delete uh all the images first of all it's not required I can pass Flags to rebuild these images and rerun the containers but uh just to let you guys know that if it creates all the images first I need to delete the containers actually so I'm going to delete the containers first of all then I'm going to delete the images it is going to get deleted all right so now I'm going to run the final command here so I'm going to run Docker compose up let's see guys If it creates the images for both of these projects in fact three projects one is the mo DB uh image okay so let's write this down I'm going to hit enter so it's actually pulling the DB uh I actually deleted it I should not have deleted this one it actually cached as well you can see the size of image the mongod DB which is the uh 30 MB so it's currently downloading once it completes downloading it it will start uh running the docker file command of my API project which is built on mod Express M DP uh as you guys know um okay it did not cash it U this is what I expected guys actually uh because I deleted the image and uh initially did not show the correct size of it okay so let's pause this video and get back to this once it completes downloading this mongodb image from dockerhub all right guys so it's finishing up downloading the mongodb image meanwhile I would request you guys to subscribe my channel and like this video I hope that you have learned something something new from this video I'm putting a lot of effort creating these videos for you guys all right so it has completed downloading mongod DP image from dockerhub now it should start running the docker file off the back end first of all and yes it has started running the npm install nodemon uh run npm install and it's just copying this thing and after this it should start running the front end project as well so let's see if it starts running so it's exporting so let me allow it and uh over back end is running so it's starting the development server now uh for the front end as well so this is the react project I believe uh let's go let's go to the bottom so let's see uh and verify from this one so both the images are created the M API M client and the mongodb and I'm going to go to The Container you can see that all of these three containers are run running uh in the docker desktop I'm going to open up the browser let's try to verify and if I refresh this is the benefit of volumes uh that I just showed you that it persisted the data which I created before okay uh it fetched out from the cache all right and now I'm going to go and open up the Local Host column 3000 and this is where our react project is running so I'm going to open up 3,000 all right guys so our react project is running as well our back endend is running as well and these these notes are being fetched from the mongod DP which is stored let's try to add another note um here uh through the postman okay so I'm going to go over here in the body let's try to change the title as well so you can see the difference I'm going to add anything like it and I'm going to send this out so our backend is running that's why it has returned this response uh let's verify the API yes and let's re refresh the react project as well all right so how quick is that we are able to dockerize over whole mon stack application uh using Docker files and Docker compose and we are able to run both the projects with only one command which is the docker compose up all right so that's pretty much it guys in the next video I will be talking about configuring next js14 project with Docker that requires server components client component and after that I'll start off creating videos on CICS continuous integration continuous development uh setting up prettier pre-commit Husky for uh managing the uh code quality and the folder structure of the project for multiple team members and these skills are very much important and required in the development world if you want to work in an organization in any company they demand you to know these basics of Docker cicd uh even for developers some people find it like this is for the devops engineers no you have to be a full stack engineer you know front and backend and deployment stuff as well all right guys thank you so much for watching again do subscribe my channel I'm putting a lot of effort creating these videos for you guys thank you so much for watching again see you in the next videos

Channel: Programming with Umair

Views: 747

Keywords: docker with mern app, integrate docker in node, intergrate docker in react.js, react node express mongodb, docker tutorial, learn docker, dockerfile in MERN app, docker-compose in mern app, build apis in node express, run mern project with docker compose, build docker image for mern project, run docker container for mern project, docker tutorial 2023, integrate docker in react.js project

Id: N9MsjZKhnpY

Length: 44min 17sec (2657 seconds)

Published: Mon Dec 11 2023