Docker & Angular: Dockerizing your Angular Application | JavaTechie

hi everyone welcome to Djibouti key in this tutorial will discuss how to decorate an angular application so in simple word dr. eyes means create a docker image of an application isn't it so the process to create docker image is similar for all the language only you need to do some modification on docker file so whenever your dock arising in the application first you need to write one docker file so that docker file can vary based on the language so let's say I am writing for java application then the element of docker file can be different if I am writing for angular application then element for the docker file can be different okay so let's quickly create one angular application then it will docker eyes that application so let's get started [Music] [Music] let's go to the root directory then from the terminal will create an angular application okay so I'll go to the root directory then I'll create the angular project we know the command how to generate an angular project so I'll give the project name docker or I can specify in G - docker example ok then click enter it will take couple of minute to create one angular project so it is asking do you want to use routing so as of now we don't want to use it we want to use CSS so finally our angular project created successfully now let me open that folder so we created ng docker example select this folder fine then go to this is our C and let's do some chains so I'll go to this app component the TS then I will do some change in this turtle section will write docker writes an angular application now go to this app component dot HTML so I will remove this I just want to plant that text ok I put some there let me remove these things save these two file so what we can do now let's run the ng build to generate all the compiled file so I'll go to the terminal so I'll type here ng then build then double - prod okay so once I'll run this command all the compiled file will be generated inside one more folder is called deist so angular will generate one more folder called east inside that it will add all the compiled file ok so let me run this so you can see here in the building success now it created one more folder called East here okay so if you'll go inside this folder you can file all the compiled file here ok so what we can do here we can create a docker file ok so go to this root directory then click on this file and type here docker file so this DS should be capital whatever the language we are using the signature of creating docker file is same click on enter so this docker file is placed inside this dist folder I just need to get it outside SRC so I can place it here now in docker file we need to specify two things from and copy just add it in from we are telling two docker dock or just download this in GI NX and this version 1.7 10.1 alpha in version then copy all the compiled file from this dstfolder and place it inside this docker container ok then we can be later image so you can add few more element but this will be the easy or minimal step to create a docker image fine now we can type a command docker build then - so better let me clear it first so build a docker image you know the command docker build I fell target then you can give your image name so I will give ng the cur - example dot but before create this docker image makes your you should of your docker terminal ok now click enter it will take couple of second to create a docker image because it will download this in Janak server then it will copy all the compiled file from the application and it will put in this docker container yeah so it completed all the step step one from the downloaded this Ingenix server then it executes this step to it copy all the compiled file and placed in docker container now if you'll go to your docket terminal if you will type docker images you could see your documents this is your recruiter just now right ng docker example if you see this log you can find your 21 second ago right now we can run this docker image or ng docker example image in docker container so we know the command how to run docker image right so let's type the command docker then run specify the port I will specify 8 0 which will be my docker container port and I can space by the local port also 8 0 even you can give any number ok then give your docker image in G docker example now run it now just go to your browser type here localhost then give the port 8 0 if it will not work with the localhost what you can do just go to your docker terminal copy this IP instead of localhost we can place this IP ok we can see the message read docker eysan angular application wouldn't run this angular application in our local server if you observe here ID enter on the ng serve open command I just ran it on docker container that's why we can able to access on the port 8 0 along with docker right doctor IP instead of docker our localhost ok so this is how we can docker eyes an angular application yeah that's all about this particular video guys thanks for watching this video meet you soon with a new concept

Channel: Java Techie

Views: 54,546

Keywords: Docker, angular docker, dockerize angular app, angular docker tutorial, angular docker nginx, javatechie, Angular 8, docker image

Id: J9uKG22lBwA

Length: 8min 52sec (532 seconds)

Published: Tue Feb 25 2020