Docker & Angular: Dockerizing your Angular Application in 10 min for Beginners

so if you're here obviously you know from the thumbnail that it is about setting up angular using docker so docker has become very powerful and this container process is needed anywhere like you whether you go to aws you do go to gcp or you go to any kind of uh platform cloud platform the container technologies helps a lot so that is where the need comes we should know how can we deploy our angular application using docker containers so if so before i start the prerequisites will be that you should have at least the docker desktop setup in your machine and you should be having angular running for this video i'll be using a extension called docker extension if you see this docker extension is available from microsoft you can go ahead and download it even if you don't have docker you can just go ahead and download this extension it will automatically help you to download the docker desktop before starting welcome back to technosaver okay let's go ahead and create a new app called demo app we can we can create a new app by using the angular cla commands called ng new demo app so now angular will be scaffolding all the templates which is needed to create this new app so you'll be asked for a few of these options you can just go and select yes for everything okay and if it is the first time it will start downloading the packages it might take slight little bit but if it's uh if you're regularly having this angular environment it should be pretty quick so i will pause my video and we'll start again once all the packages are downloaded looks like most of the packages are downloaded and we also have our node modules folder over here so if you expand the notebook modules it will actually show you all the dependent models that wasn't installed because of this angular app we are mainly interested in looking at this angular app angular.json so in angular.json you will be able to find the application name that is demo dash app so note that this demo dot app will be having a output folder called this dist slash demo dot app so remember this location we will be needing it while creating a docker file so let's go ahead and create a docker file so what's a docker file a docker file is actually a set of instructions that is given to docker to build a image in some manner okay and the docker file is already self explanatory so it basically tells that there are two steps to it first is it will build the image the second step is it will deploy it so in the first step it tells that it will be using the node image to build it so what's the work directory how to copy the files and after that obviously we need to run the npm install then we need to run npm run build so now if you remember we had mentioned that the output file will be saved in test slash the demo app folder so we need to make those changes so the build is done now the build needs to be copied to a lightweight image that is nothing but nginx okay doing that let me just uh see that our application is actually up or not so for that we'll be just adding ng serve okay it didn't work because we are outside the root folder so we need to actually navigate inside the angular application so as soon as we navigate inside the angular application the command works and our application should be up and running in no time cool so we can see that it is already hosted in localhost port 4200 so this is a so this is a dummy app that comes with angular we'll try out one more thing before we make changes to the docker file so normally what do we do is we run ng build so that we get the protection output and that code normally goes heads and it sits in some is location or some other location in a traditional manner if we have a is server or some kind of a server we'll just copy that list file location so for that we need to just type ng build dash dash broad okay looks like yeah just ng build will work out and as soon as this is completed you will see that there will be a test folder created so now we have the test folder under demo app you'll be able to find the test folder so this is the content that needs to go into any of the hosted servers so that is the same thing exactly that is which is mentioned in docker file so till this step actually the build process is done after that it starts copying the file we need to update it so as i mentioned the output path will be thick slash demo app so as soon as we update it our docker container will be able to copy the output to the nginx container as you can see there in this docker file there is a very interesting thing happening one container is actually communicating with another container in the second step the copy from it's telling what container it needs to copy it's not some static file location or something now to build this container what we can do is we can go ahead and type the commands but since we have installed the extension let the extension do the work for us so if we type docker we get all the list of available commands that is there for docker okay on selecting the docker build you see the docker build output command line terminal which we should be typing manually has come up so it should take some time and it will be getting started looks like we ran into some issues actually the issue is that the docker was not started so i'm starting the docker now so now the docker has started let's re-run that same docker build so we can just close it off and then right click and docker build it will ask which container and wow so now it starts pulling all the required images again if you are doing it for the first time it might take some time for you because it has to download gbs of images from internet you can verify the docker is running or not by running the commands like docker ps docker images and etc so as soon as the docker images are pulled from internet then it will be using those images to build it this will be also available in the docker desktop you can see it in the images section of the docker desktop okay the build has already completed and it has started executing the other commands so it's basically copying all the stuff and running the builds let's see the images section so we'll be able to find the docker angular in the images but surprisingly there will be no containers available the reason being there is a image that was built but it was never run so there are two things to it a image is like a class and the containers are like instances of the class so users have just created the class but you have not created any instance of it so that you can execute it so we now need to go ahead and create a instance for the same so just a quick glance at the terminal you see what all commands you have written at the docker file is now being reflected in the terminal so the docker actually executed the commands one by one so there are two ways of starting it we can go ahead and click on run so here you will find get some more options like which port you want to host it at and do you want any volumes or not although i'm not interested so it's fine we can skip it we'll give some kind of a name like demo and run it so you see uh the in the port 8080 now the container is hosted so you will be able to find the angular app in the port 8080. so now our localhost port 8080 contains the angular app so let's open the command palette this is the second way where you can go ahead and use the docker run using the options that we have if you scroll down you'll find the docker run and again it will ask you which build or container you want to run it against sorry which image you want to run it against now you can see that we have two active containers running one is running in port 8080 now this one got started automatically in port 80 so let's uh change it to port let's try out 81 let's see if something is there or not okay there is nothing obviously so if we just type 80 it opens up the same angular app so now the same angular app is hosted in two different instances without doing any other things we just created one image and from that image we can spawn multiple instances so yeah that's the power of docker and the most interesting part of docker is that i can publish this image to any docker repository and anyone of you can just pull this image and see this angular app running without even having angular installed in your system so docker actually removes all the dependencies over it from the deployment process once it is built in any of the dev machine it can go ahead and run in the exact same manner in different production machines you don't have to go and set any environment variables or install those versions it works seamlessly so this is how you can deploy angular apps using docker containers hope you like this video do hit the like button and if you are new to our channel please do subscribe thank you

Channel: Techno Saviour

Views: 24,685

Keywords: docker, angular, 2022, technosaviour, docker for Beginners, dockerize angular, angular deploy, docker deploy, angular deployment docker, angular latest docker, angular nginx, node nginx docker, node angular docker, nginx angular docker, docker extension, vscode docker, vscode docker run

Id: GXf0y_nUIZE

Length: 11min 7sec (667 seconds)

Published: Sun Jul 17 2022