Containerizing Angular application for production using Docker

In this post, we will containerize angular application using Docker.

Table Of Contents

• Pre-requisites
• Creating Sample Application
• Creating Docker file
• Creating docker ignore file
• Building a docker image
• Running a container
• Publish image to docker hub

Pre-requisites:

1. Install Docker for Desktop
2. Install Node js
3. Install Angular CLI Make sure you have the latest version of Angular CLI installed.

Creating Sample Application

If you already have Angular application you can skip this step

1. Open Terminal / Command Prompt
2. Create new folder mkdir AngularDocker
3. cd AngularDocker
4. Initialize Angular application ng new SampleApp
5. Navigate to created project cd SampleApp
6. Make sure app is running ng serve -o
7. Navigate to https://locahost:4200 in your browser.
8. Feel free to make any changes.

Creating Docker file

To create a docker image we must create the docker file and specify the required steps to build the image.

1. Open the Project in Code Editor I'm using VS Code feel free to use your favorite code editor.
2. Create the Dockerfile without any extension in the root of your project.
3. We will use docker multistage build to create an optimized image. In this process, we will start with the node image to build our angular application and then copy the required file in the nginx server image. You can learn more about Docker multistage build here
4. Let's create our docker file

5. FROM node:12.16.1-alpine As builder

   This line will tell the docker to pull the node image with tag 12.6.1-alpine if the images don't exist. We are also giving a friendly name builder to this image so we can refer it later.

6. WORKDIR /usr/src/app

   This WORKDIR command will create the working directory in our docker image. going forward any command will be run in the context of this directory.

7. COPY package.json package-lock.json ./

   This COPY command will copy package.json and package-lock.json from our current directory to the root of our working directory inside a container which is /usr/src/app.

8. RUN npm install

   This RUN command will restore node_modules define in our package.json

9. COPY . .

   This COPY command copies all the files from our current directory to the container working directory. this will copy all our source files.

10. RUN npm run build --prod

    This command will build our angular project in production mode and create production ready files in dist/SampleApp folder.

11. FROM nginx:1.15.8-alpine

    This line will create a second stage nginx container where we will copy the compiled output from our build stage.

12. COPY --from=builder /usr/src/app/dist/SampleApp/ /usr/share/nginx/html

    This is the final command of our docker file. This will copy the compiled angular app from builder stage path /usr/src/app/dist/SampleApp/ to nginx container.

    Complete Dockerfile

Creating docker ignore file

When COPY . . command execute it will copy all the files in the host directory to the container working directory. if we want to ignore some folder like .git or node_modules we can define these folders in .dockerignore file.

1. Create .dockerignore file in the root folder of your project.

2. Copy below content in it.

Building a docker image

Navigate the project folder in command prompt and run the below command to build the image.

docker build . -t usmslm102/sampleapp

This command will look for a docker file in the current directory and create the image with tag usmslm102/sampleapp. with -t command you can specify the tag for the image the default convention is <DockerHubUsername>/<ImageName> e.g. usmslm102/sampleapp. usmslm102 is my docker hub username and sampleapp is the image name

run docker images command to list all the docker images in your machine

Running a container

You can run the docker image using the below command.

1. docker run -p 3000:80 usmslm102/sampleapp

   -p flag publishes all exposed ports to the host interfaces. we are publishing container port 80 to host 3000 port.

2. Navigate to your browser with http://localhost:3000

Publish image to docker hub

Docker hub is a container registry maintained by docker. Make sure you have a docker hub account.

1. docker login

   Provide valid username and password. once the login is succeed run below command to publish.

2. docker push <UserName>/<ImageName>

Replace UserName and ImageName with your username and image name. e.g. docker push usmslm102/sampleapp
My image url: https://hub.docker.com/r/usmslm102/sampleapp

Note: By default, the image will be public. Navigate to docker hub image setting to make it private.

Comments

[shreyajoshi12]

I have windows O.S and I am trying to run the docker image at 3000:80 but its taking too long.Please help

[Usama Ansari]

Can you show your docker file and folder structure?

[shreyajoshi12]

Actually the container isn't reflecting changes.I have followed the same docker file that you mentioned.

[Usama Ansari]

If I understand correctly. you can run the container but you not seeing latest changes?

[shreyajoshi12]

Yes, so when I again built that image so it reflected changes.If change is done in container then should image also be built again.I am a bit confused about the container and image part.

[Usama Ansari]

If you build the image then it should reflect tha changes. Try adding different tag to your image while building. Feel free to DM me on Twitter if it is still not solved.

[Eugene Vedensky]

Nice one.

[GaurangDhorda]

can you give one example, where this docker image of angular app is useful or beneficial ? one real-life practical use-case.

[Usama Ansari]

If you have a small application, it will not make much sense to put it in the container and run it, though you can do it and there are lot of cloud services that run the containers in a serverless way. The practical use case will be if you have a large application and using Kubernetes for all your services then you can run your angular application in the same cluster and you can get the same benefits of Kubernetes like auto-healing, scaling, etc.