Deploy angular on docker | Dockerize angular application | How to create bind mount and docker imag

Music credits : https://www.bensound.com/

DockerHub - https://hub.docker.com/
Visual Studio Code official website - https://code.visualstudio.com/
Angular cli - https://cli.angular.io/
Angular official website - https://angular.io/

Video Links
Angular Tutorial part 1 playlist - https://www.youtube.com/playlist?list=PLZdPgkRI3ruhsIqV7Cr5hxjAyNirV9Jr0

Angular Tutorial part 2 playlist - https://www.youtube.com/playlist?list=PLZdPgkRI3ruiRflFjJVdweTili5mOWWhl

Angular playlist - https://www.youtube.com/playlist?list=PLZdPgkRI3ruiOnkAoA7UGi_ueg4PuB8qB

Check out other videos on our channel & Don’t forget to subscribe.

Transcript
Hey everyone,

Today's video is about leveraging the powers of dockers for you angular application. You might be a devops person playing around with dockerizing stuff or maybe you are an angular developer who needs to dockerize your angular application, maybe for local development or to share the application as a docker image for testing. There are lots of benefits to docker which include security, scalability, quick setup time etc. but we wont be discussing them here, but before diving into the main content lets take an example. You have a new developer working with you, normal circumstances he would need all software setup and configurations done on his system and that takes a lot of time. If your application is in the docker environment then the onboarding would be as easy as running few docker commands since the actual servers would run inside docker containers.

Jumping to the topic of this video, if you just need a local server to build and deploy your application locally then a really quick solution would be using bind mounts. Bind mounts just link a path inside the running docker container to the path in your host system. So first we build our application using npm run build --prod. In the dist folder we get the required files which the container will serve. Now all we need to do is spin up a nginx container, expose the port where we want our application to run and that's it. Since I am using docker toolbox our application is running on some url and not localhost. we will not get into the details of how docker works but if you need help on any topic put it in the comment section below, we are assuming you are familiar with basics of docker. This method can actually be used generically for local development and testing wherein you dont have to setup whole environments and can simply point to local files and utilize the power of containers.

Now lets create a docker image of our angular application which we can then use to spin up containers or share to other developers/testers easily without any setup requirement.
For creating docker images we need a dockerfile, create a file with case sensitive name Dockerfile in angular projects root directory where we have package.json. Inside the dockerfile we are going to first build our application using a node image. For this we setup the base layer of node:alpine and copy our package.json file into the image so that we can run npm commands to build our application. in second stage we then change the base image to nginx where we copy the build artifacts into the nginx path given.
Here we have 2 stages and in early years of docker we needed a shell script to first build our application then clean it up and create a new image for the actual deployed application. Now with multi-stage build introduced in docker it is all possible through a single Dockerfile.
Remember that the path you copy to nginx should be the one which has index.html. You may change that path from angular configuration but in Dockerfile if the path does not have index.html you will get generic 403 error from nginx.

Now when can execute the docker build command in the path having Dockerfile to create our application image. Once image is created just run it using the docker run command and thats it. Your application will run on the port you specify in the -p option. Hope this video helps you out. Thats all for now.