MERN Stack with Docker Compose - The Complete Guide for Beginners

hey namaskar this is your body Shob and I'm back with a brand new video so in this video I'm trying to do something new and we are going to explore together Docker compost but this is going to be a little bit different from other videos because we are going to develop a little bit of applications this is going to be a m application and uh so that you can also get a complete idea how we're going to integrate the front end to back end to database using toer compost so you might have some questions about what is what the heck is Ducker compost so Ducker compost is a tool that actually helps you to manage multiple Docker uh under a uh under a under a umbrella actually okay uh you actually uh managing all the Dockers Docker files or the docker images or containers under a tree so the tree is the Docker compost so uh without talking too much let's get it started because I don't want to make it boring so I'm going to create a new folder and I'm going to name it as Docker compose YouTube and please ignore my background noises uh I'm going to I'm not going to make this video uh Noise free and I'm not going to retouch this video video as I want it to be as raw as possible so I'm going to open up a code editor inside this folder in my case this is vs code it might be different for you so first of all let's create a folder called server and in This Server what we are going to do we're going to initialize CD server LS we're going to initialize a what we can do okay let's go we are going to do a very simple thing which is uh not just right so I'm going to go for npm init fine so let it be everything okay so we have the initi initializer actually not initializer this is package. Zess file so let's open up our suffer and go for npms Express so we're going to install Express mongos yeah that's it I guess that are more than enough for this tutorial so I'm just going to go for a index.js and here uh okay just for demonstration purposes I'm not going to do all the best practices uh to make this server run as as this video is going to be focused on only Docker compost that's why we're going to making a very minimal server so that we can just uh make API endpoint uh if we hit on it it can uh with a post request it can get uh it can actually add an entry to our databases and another URL or entry point that can actually F the data from the database and give it to the front end uh in s format so yeah uh now what you can do just come here and see that we have this simple thing just copy it and paste it here I'm not going to explain this code uh too much however it's going to just require something uh the express initializing the express into the app and it is this is the port which I don't want to be run on uh 30,000 in my case I would refer it to um 8,000 it might be different for you completely uh depends up to you okay so here we have this hello world but here we need to use a post Okay add right okay so now let's go for mongus we have mongus and before that let's open up our um our terminal and I'm going to open my local mongod DV server PSE sudo bre services start start mongodb community uh the process might be different for mac and Linux I hope you will uh find out the way okay not Docker it's it's what was that mongodb Compass okay let's see yeah it's connected there are my all pre-existing databases now what I need uh I just need to connect it right to connect it let's uh let's take this example well so this is the kitty I guess this is the name it's schema actually okay save then did cat okay model yeah that's the model uh we don't need this uh we're going to add it here fine um do then um okay console. log database connected here oh not cat you not it's cat my bad um DB error okay so this is it this is the um schema and here by lad we can use um body our name right can use name where r dot body but actually I'm having some I'm actually uh suffering with some throat problem so uh let's let's see if we can return it on not so let's go for oh okay so we can actually use that start node index.js npm Run start and it should start database is connected that's okay fine so this should be a post post method and let's open up our Postman okay let's make it a little bit quick however we can also make it with thunder client if we have yeah rest the extension fine Thunder client where is it thunder client here we have here we have it so let's make a new request uh where we need a post request at our local host at weport it's 8,000 and add let's make a body called name I'm going to use Dobby so should return back uh oh nothing else it's not me to get it fine so it's the [Music] cat have test so let's see uh if you have any test thing or not so let's come here test books cats okay let's make it little bit different that compost database fine so I guess this will be much more better thing so let is go for compose compose yes now if you're going to hit it is a function well compose what is that fine I think I think it's not a function it's a request. body M fine let's let's deug it it has been a long time right okay um it's a little bit weird because we need to use nmon here okay I guess it's should dark well fine it should have hey def dependency okay dependent dependences it has no one yeah it's running quite well now it's running quite well now so uh fine so if TR it again it should go yes it's name it has this uh my bad okay let's go it's undefined what it's not going to work I guess uh we need uh this in Pur maybe yeah I was missing it yes okay so we need body Purser actually it's been a long time I didn't use uh nodejs oops not in it's install fine my bad Dev I guess it's going to work now just simply copy this paste it here then I'm going to use this to oops my bad oh and for that I'm going to use it that's okay now if you run this I guess it should work yeah now you can see that name is Toby it's going to work and if you come here and just simply D structure it const name is going to be R do body and this name should be all respondent here tobby fine yeah now we need to save it how just use this cat cat dot I guess insert insert oh my bad I guess create Maybe um dot I don't need this simply come here use this asynchronous and make it out not lit it's response and console. log fine what is that oh okay R has already declared okay so I'm going to go for DB catr cat R cat response if you run this okay it's been inserted in our database uh if you have any doubts let's come here and reload this reload this we have this Toby well that's it okay now we need to create another thing which is uh pretty identical to it so I'm not going to make it so much perfect okay it's going to be a get oh sorry so I'm going to get and ID I guess GST CAD is going to be a cad Dot find on find by ID and the ID is going to be ID a w status it is going to be 200 startus 2011 it means it's created okay so if you run it now it should return as oh my bad we did a mistake here yeah need this to work on fine so if you run it see that's good okay fine so this is it but we also need a car what we need we need a call right so let's go for here n bmz course we need course um simply install it okay you might be wondering why I'm making this video so much long with this coding thing but you must need to know it what's going to happen under the wood right so this is quite important just simply copy this so this is not that much hard because I'm going to I'm actually making this copy and pasting things here simp simply use this have. e okay um there might be something like um hello headers origin origin yes this origin is need to be this that's okay okay now uh now actually uh what I need this thing can be a little bit okay fine we are actually doing this here it's not a problem um fine so so what now let's open up our front end let's go for create it so what what we are going to do is to be next justr or something else I guess uh let's go for it uh sorry for my background noises what we can do is installation okay um then use client so it should create a new folder here yes typescript no I don't need it as if now yes L yes I need tellin CSS no I don't need it Source directory no I don't need it app router no for this app I don't need it no and it's it's going to create the front end uh packages here now I don't want to do so much thing just simply remove it the head create cat up cat up and I'm also not going to uh use all the good practices of next next J so let's come here here and use use um I guess we need to use let's say a form form uh input name is going to be cat cat uh name name value is something that we need from here user stat oops my bad const uh name set name is t it's going to be null by default const CH so I guess here need to be your name and on gent okay on change it requirs this and set name is this e do value right I guess this is this is more than enough for uh printing it oops my bad we need to sit for here okay if you run it it should be here okay so we don't need this next head I guess the styles we don't need this let's remove it yeah okay so it's not going to work name name Val name okay Target dot value I guess yeah I use oh my bad Toby okay so now we need a way to uh send it my bad onsubmit um what we can do just create something that const submit form a do e do prevent prevent prevent default I guess and then we need this to be call here and I'm going to go for console.log I am submitting I'm submitting okay so it need a button to inside here under the form submit and if you run it it's not going to do anything but if you remove this it may reload okay to prevent this reload we are going to use this so it's not going to reload again and again okay so now what we are going to do so let's go for a we need a a thing R the pages I guess it's in API or not I don't know so I'm going to uh C tumas so here we're going to make const const uh server API state right we can use it here FL SL slash look host 8,000 at 8,000 okay so you can use it later on so I can to use it use fetch dot um f face. URL that is Ser API and uh then we have this method method name need to be a post method and then um headers that has a content type I guess I can use it yeah content type application Z and a body that need to be a name do then we have response response dot Json or I guess data and then you need game then console. log data that's fine if we have anything [Music] here any error then I'm going to console.log err okay so if I use Kitty and submit it submit it so I guess I can see it here in the console oh my bad because we need to hit the route right my bad add okay so I think it should dark now uh again okay I guess let's see Server npm Run start yes let's use it runtime here what happened here it should not be null okay [Music] mhm okay so it's little bit weird I'm going to cut it think it's not going to work okay so let's go not this I need to go to my um Thunder client where we have this just copy this come here and paste it data I guess it should be a console. log R and then we are going to see it how it's working oh I got it stringify I told you it's been a long time so if you use gy and here we have a response that's created it has a body headers Ur and if we open up our and refresh it it should use Toby Kitty I got the kitty from the front end that's s okay so now if I use um Sy then data is going to be console do log data now if if I use it g let's say [Music] kt2 yeah I got it okay now uh let's make something really good like cats set cats user state it's a list and that let's go for a div where I'm going to go for a cats. map okay and use ason a for the cat name is Val okay now now you let's make a delay fine now what at the time of doing this it should my bad it should set cats Dot cats and it's going to be data dot um I guess name if I'm not wrong it's name okay so now let's have a look hello and it's yet not arguing okay it didn't talk I guess this should be okay handled fine so if I use hello here it's not going to use anything for well so react render list with map so okay I think I'm doing something wrong should be a cat's data and there should be a data here okay so yes I got it I was little making little bit of things we're not returning anything okay now it's too dark okay fine so it should be a div and key is going to be a index index fine so name hello my bad G and if you submit it still not going to work so so well what you can [Music] do okay set cats cats data. name I guess it should be like this and here if we use l two let's say how it's Su so let's see how it's work it's not going to work okay so I'm not making it what is this runtime error okay fine so this is not working technically okay so what you can do fine so let's come here and set gats cut name new yeah I got it now I think we can use it here data. name okay fine so so now we need another thing which is the use effect fine need fetch const get gats now what fet I think it should be a cat list right so in the server we [Music] can use is pretty pretty same thing that is get we don't need this body we are just going to Simply use Gat dot find find so that all of this are going to come uh at once so if I use this as a get and uh get so it's going to give us oops my bad why it's not going to work because of this yeah my bad so yes we are doing this um let's go to this and use a new server uh end point hit another endo so this in point is going to be like this and get and here we don't need this I'm going to go for cats response response then [Music] const data data uh we need to see it how it's going to work get cats get cats okay fine so we have this promise has this array data okay cats data and data cats data cats data dot data I guess it's it's not like that okay so I think this is it yeah here we have that's good now what we need we need a set cats my bad sit cats and this should be a cat stter well this should be a cat St now and uh once it's going to be like this then we should not use it we should use the data as well here and here under this we're going to name it as fine that's it and uh okay so we have this see everything is here so if you run it as my name has a cat so it should be here and if you run it it's persistance here because it's coming from database right okay so that was our pretty much the application now we need to dockerize it and then we we need to uh manage this Docker that uh those Docker files using the docker compose so simply come here I'm going to turn off all the servers just simply remove it and then just need to come here and uh here we need a Docker file Docker file and we also need a Docker dot Docker ignore Docker ignore file okay so what we can U do here I don't have that much time so let's go for use chat GPD um next JS fine okay so I'm going to copy this and paste it out here and from here we need um from base image that image must need to be from or come from the docker Hub we may need this letter one so I'm going to Docker Docker Hub okay so I'm going to go for node so let's open it up node and we need a node version of the Alpine um from node this and then we need a arcing directory uh AR there that's going to be app then what we need we need really simple thing we need a copy uh package. Jason that strict uh stories means that whatever called package uh will be uh copy from here to there fine then I'm going to U use a command run npm install and then we need copy everything so this one is from our file system and this one is our this working directory inside the docker IMS same for uh same for this all the codes are going to be inside this dot to move from that from there to be inside our this app directory inside our dos okay so now what we need we need I guess we have a next two so um I may need to test it out here if you're on npm run build it's going to build a key propor so okay we have a little bit of bug that's why it's not going to force us to do it so let's come here we have a index and a key here which is reir so Val do ID or index okay if we run this okay fine so npm run start and if I come here Local Host 3,000 it's going to be the same thing and okay my bad so now what run npm run build we're not going to use our uh build uh from build that kind of them thing okay as build uh we'll cover it up later upcoming videos so we need a CMD for npm Run start yes uh it's important to expose our Port which is in our case 3,000 that's it now let's come here server in This Server we need dot Docker ignor and we need to run uh Docker ignore for Express J okay so we can simply use it and paste it out here and pretty much the same thing Docker file from we need the same base image of Docker where is it it's inside our Docker file I guess but where is the docker file here so let's copy it out and this is for our server everything is same we don't need this build uh the expose thing is here 8,000 npm Run start okay done now what it is really simple we need a Docker compost. EML we need a version version which is 3.8 in my case it might be different for you Services the first Services I need is database uh DB I guess it is the name and then I can use image that's called and container name DB container ports the ports are going to be this this one is from our Port um inside from our container and this is the exposing thing that's what it is then what we need we need uh volume volume data is going to be like data DB okay then we need a what do we need we need environments environment uh environment file I guess in file and this EnV file can be um contain here EnV and here let's come to uh here we have and we have this two thing and let's past it here these are the credentials for your mongodb database then we need networks uh M yd net fine first of all let's create the networks okay then we need volumes these are the volumes that we need okay so our database is done and let's see uh if we can see it or not and let's remove it for now turn it up so use Docker compost do M compos and uh let's see oops my bad need to be up oh because I'm not running the docker demon you need to run the docker demon uh to run it you must need to know and know the docker hard s fine so oh my bad so EnV [Music] okay the dot is missing here that's why it just looking like this it is already used because uh in the beginning of my video I have uh turned on my default default mongod DV server so I'm going to stop it re service says stop mongod DV community and it should start uh I guess we need a pseudo my bad yeah it's stopped now I guess it should work still using so if I run it already in use let's remove it okay so if I just continue it run it again it's not used anymore yeah now it's working so if you run it it's not going to work uh because it requires a username and password so what are those for our case root and example feel free to use it as your uh reward rward on and I'm going to use this fine we can we can use it anywhere my bad so here we need EnV and use U and here instead of Local Host we can use this service name DB that's it now let's come here uh Stop This Server now use the um server build we have context path which is inside our server so server uh Docker file which is already created that's been pointing here and then we need another thing which is the container name um get server and then we need a ports which is 8,000 this 8,000 uh are coming from our set container and this is for exposing it from the container okay so we need not any volumes here but we need an environment file that's inside our server andv which is um actually this one okay okay so now we need a networks because we need oops my bad networks the networks need to be same because we are making them connected together and This Server will be depends on oops my bad depends on this service so it actually means This Server will wait for the mongodb service to create created otherwise it don't restart okay so let's thing um the server is is up but mongod is not running so it will be a problem right so it will the server will be wait uh until the mongod DV starts itself okay so now let's come here in our server index uh here we need to remove it use this like process. EnV dot what was that this should be a compost past it okay so let's run this and see how far it goes so it's installing it's done okay head Shing is the authentication eror M server authentication error what happened actually I guess do I need to remove it okay let's see it's working here but not working under the cat server Okay so authentication failed authentication failed DB um what's that what it's not working okay let's have a look here is that oring or not just copy this and uh past out here okay let's run it now it's t here I guess we need to rebuild it okay my bad should be like this well let's see now why it's not working so do I need to remove it and Local Host it let's see but it should work with that on two is it it worked here I guess no it's it's not it's not databas is still not connected so what is the problem here what is this let's have a look here okay let's see if there is any authentication thing or not it's sh dark what well let's come use it here and if we remove this part fine so if we remove this part and under this it should remove from here yes it's it's authentication failed why because we have previously added them right so we need to remove it um then we need to remove them too and Docker compost server it say Mages it's a server um okay so the more two and if you run it okay so it's not authenticated about authentication so I'm going to remove it and run it again it's configured and from here if we remove them and rebuild it it should work let's have a look the server database is connected that's weird a little Okay so in a d username they're not working for some reasons but let's let's not um cut them off I'm going to use it here as well and let's go for root and example root ex M example remove it in here let's let's make it at server EnV and well we need we need the docker here to remove all of them and that this video is a little bit longer not little B it's so longer but I would like to give you a complete thing and it's authentication here I don't know what is happening but let's say we are simply going to paste it here might be a good thing I'm not sure let's see yet not so okay okay so uh let's do something compose mongodb username and password are not Haring with Docker compos service name while connecting with mongus not JZ oops my bad it's okay this is what I was doing but yet not working I guess I think we need to use it here I think so DB compass and and uh let's remove them once again remove this from here and run it again let's see what's going to happen here nothing has changed so I think we should um take it later this authentication part um okay so let's come here in the docker compose we don't need this for now in here in our environment we also don't need this it's DB only and remove it okay so I want to remove it okay so remove it fine so let's run it that's okay and if you run it here come here in database is connected so with the authentications something is going to uh something uh weird is happening which I will figure it out and update it with the um next video so let's go for our client thing to configure here let's come here that client build context is client and doer server container name is going to be cat client count client container and then ports is going to be 3,000 3,000 volumes volumes are pretty okay can use server app and [Music] then next modules is going to be app. node modules and we need to use networks and it should depends on depends [Music] on DB and the the server okay however we can also use just only server because the server is also dependent on database mongod TV service but whatever it doesn't make any changes here okay okay so let's go and run it my bad I'm badly affected with this so it's creating let's give it a time just spin up and I gu it's at the end of completing everything yes yes yes done done I guess oh my bad cannot find the model Express why oh it should be client not server my bad for that I I must need to remove it because it's it cashed from there so let's remove it my bad silly mistake okay so it's created now I think everything is working good uh C uh DB the container is running good this one is oops my bad this one is also running good so if you run it uh let's cross the finger and here we go so if you run this Toby submit it's Toby then if I use Kitty submit it's Kitty is that resistance yes it is so let's turn it off just to be make sure that it's using do compost it's not there because we have removed it so I'm going to use up again it's here see the data resistance so how you can do that just simply use the datas mode so it's not going to show you the logs it's going to run in the background that's it to verify that is Docker PS see three services this containers are running and their persistance as well so I'm going to go for the uh MOG yeah that's it so that was a quick tutorial on darker compost and some building blocks of a simple conization apps nodejs mon so thank you everyone before that I just want to um turn it down the services it's done now so thank you I hope you enjoy enjoyed this video if you are then please do it like subscribe and uh don't hesitate to uh ask your query in the comment section thank you peace namashkar

Channel: Developer Shourov

Views: 56

Keywords: Docker, docker compose tutorial, docker tutorial for beginners, Docker compose for MERN Stack, nodejs docker compose, nodejs docker tutorial, nodejs dockerfile, reactjs docker, reactjs docker build, reactjs docker compose, mongodb docker, docker networking, learn docker compose, learn docker in one video

Id: 1HM77lKPIJg

Length: 87min 47sec (5267 seconds)

Published: Mon May 13 2024