Angular 7 dev with docker | Creating Docker compose

[Music] hello everyone this is Kalyan from black box tape and in today's episode I will continue working with docker and today I will show you how you can manage a docker container during your angular beat or angular development so during angular development you always want to work with ng serve so your changes will immediately reflect in the browser in the docker environment how you can do that I will show you today in this tutorial so without further delay let's get started so first of all with our existing docker file I will remove our this engine expert and change this run to a CMD command and I will change it to NPM run build I will change it to NPM run start because in this package rotation if you see this start means we are doing ng serve here and also before this command I will also expose our port 4200 or the container port 4200 with these changes let's build this image docker build I will be tagging this image as dr. Dave and and pass the context of the route with this dot so few up table steps you can see it's using cast that means till you have not changes made any changes it will use your casts person and when we are doing absentia jizz that will be run as a new command so the image built is done and you can check with what if the image built correctly you can actually go or run a command called docker image illus and it will show you all the existing image so you can see this docker dev what we have tagged it's available here and it's created 18 second ago ok so now let's create a container using this image to create a container I will use docker run and I will use - PFLAG for our port so I want my application so drawn on port 8000 that's the host put and then the port I have exposed here in the image itself so I will use the container port to listen for 4200 and then I will pass my image name so you can see it's actually creating the container and also it is executing this CMD part and it started ranges up so whatever you see this this is a container log so let's wait so now it's started so if I now go to localhost 8000 that is the POE host port I have provided here if I go there it should work so let's open our browser window pane localhost 8,000 oh it's not working why this is not working because now if you open the container so docker PS a you can see this is the docker Dave image and this is the docker angular so you can see the ports it's generally listened for 0 0 0 0 okay so we need to do a quick change here in our package store JSON in the in jisub part I will pass a flag called host and then 0.0.0.0 so with these changes let's build our image again so our image successfully built and also tagged as dr. Dave let's create the container again so I will use docker run the same command so now let's try to refresh the browser and you can see our application is working perfectly so to taste the second option like whenever we'll do any change in the code our page should refresh automatically so to do that we'll just try if this is working or not so let's change our app component component is the title so its taste is talk or [Music] refresh saving the changes no there is no change so it's not working right even I have refresh there is no change so why it's that because in the docker file what we have mentioned it will copy packaged adjacent with this in do npm install and copy everything but once the image build there is no change whatever we do in the file until unless we again build the image we are not sending an image to the container we are not sending any changes into the container so therefore there is no update you will be able to see so to fix that we have two options one during the build we can pass the volume mapping option or there is another easy or a best practice thing based practice way to create a docker compose file so we'll take the second option as a based based practice so I will create another file called docker compose dot yml you so with that file the first thing I will mention Watson so in my case it's three block but if you using older docker version just check it maybe two or one the next thing I will specify service services so in the services part we may have different service for an example in our previous example we should have two services one is our angular application and the second one will be ninja NEX but in this case as we have removed nginx so I will just go with our single service that is for angular application so I will hit enter and then I will add a name so let's give a name of David the next thing I will build and the context I will pass as our root then I will also mean some ports and with a TAS I'm mentioning it's an eddy so I need it to be eight thousand and the container port to listen to 4200 the next thing I will mean some the volumes it is the same I will pass as an array and then Hawaii node module will be volume mapped with the container so let's add /m underscore node underscore modules so why because if you see our docker file here we have mention work directory to be a and also we are copying our package dot JSON inside this F folder so when you do npm install' generally it will create a node for the node module folder inside your app directory so that's why we are giving path of F not modules the second volume mapping I will do so that any changes here will also be level here so what I will do I will dot dot means the current context with a colon the second mapping will be the app directory and that's it so with that change you no longer need to build your image or to create a container from you because docker compose will handle both of the thing for you what you need to do you just need to use docker compose and then sorry docker - compass then up and one thing I want to mention here so docker compose comes with your docker installation so you don't need to do any additional installation because docker compose is part of docker so with this change let's run docker compose up mapping values are not allowed here line two you sorry I forget to add a colon here let's run it here in so it is running the same steps from your docker file with docker compose you can also have multiple docker files and you can also pass like which docker file would run in what stay for example if you have a sulfur and a client configuration or a application in the same directory of a server application and client application you want to run both the in docker compose you can add those services and it will also refer to different opera file that is very easy and a best practice as well from topper side so you can see it started here now I will go again and I will just hit refresh button you can see this has now this is now visible but we'll test it with a change so let me go to app component or tears doctor refresh I will add working here and hit save and I will go to this browser again it should actually automatically refresh and update so so in this case it's working and we also successfully created a docker compose file and also map our volume with the container and also docker compose will eliminate of those two step what we do manually like creating image and again we'll create a container out of those image those steps will be automatically done through docker compose so in the next week I will again come up with some advanced doctor level concepts please to provide some comments and if you have in if you have anything any problems or you want any solutions you can also put your comment in the comment box thanks for watching have a great week ahead thank [Music]

Channel: BlackBox Tech

Views: 15,316

Keywords: docker with angular 8, docker angular 7, angular with docker, angular docker, docker angular, angular 8 docker, angular with docker nginx, containerizing angular with docker, docker, docker tutorial, docker compose, devops, angular, docker container, what is docker, devops tools, devops tutorial for beginners, devops training, docker hub, dockerfile, learn docker, angular2, docker networking, docker swarm, docker compose tutorial, docker introduction, simplilearn, angular 7

Id: UJCpzOeMDBA

Length: 13min 12sec (792 seconds)

Published: Fri May 17 2019