Dockerizing an Angular App

Docker is application containerization tool used to simplify, streamline and fast track application development & deployment.

In this section, we will learn how to containerize/dockerize an Angular Application using DockerFile.

Dependencies:

• Ubuntu OS 18.04
• Docker (Lastest Version)
• Nodejs & NPM
• Angular CLI

We can install the Angular CLI & NPM using “Install Angular CLI” and Docker using following commands.

sudo apt update
sudo apt install docker.io
sudo docker --version
Docker version 18.09.7, build 2d0083d

Now, we will create a sample Angular project.

$ ng new my-fisrt-project
$ cd my-first-project

We need to add a DockerFile within the project so that we can build a Docker Image.

$ vi DockerFile

And, add the following content.

# Nodejs Base image
FROM node
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# install and app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli
# add app
COPY . /app
# start app
CMD ng serve --host 0.0.0.0

We need to add a .dockerignore file as well.

vi .dockerignore

Add the following directories and files to the .dockerignore file

node_modules
.git
.gitignore

Now, we will build a Docker Image for our sample Angular Application.

$ docker build -t my-first-angular-app .

Where “-t my-first-angular-app” is the image name and “.” represents the current directory where the DockerFile is placed. We can also provide the path of DockerFile using “-f” option.

Sending build context to Docker daemon  551.4kB
Step 1/8 : FROM node
 ---> 760e12e87878
Step 2/8 : WORKDIR /app
 ---> Using cache
 ---> 25d170466764
Step 3/8 : ENV PATH /app/node_modules/.bin:$PATH
 ---> Using cache
 ---> 8426c93d6792
Step 4/8 : COPY package.json /app/package.json
 ---> Using cache
 ---> e96fb8e116cd
Step 5/8 : RUN npm install
 ---> Using cache
 ---> 81bd3d6a8fa0
Step 6/8 : RUN npm install -g @angular/cli
 ---> Using cache
 ---> 344e43c68948
Step 7/8 : COPY . /app
 ---> Using cache
 ---> 537a7d30ee21
Step 8/8 : CMD ng serve --host 0.0.0.0
 ---> Using cache
 ---> c8064be05130
Successfully built c8064be05130
Successfully tagged my-first-angular-app:latest

It will build a Docker Image that contains our sample Angular Application. Now, we will list our newly build Docker Image using following commands.

$ sudo docker image ls my-first-angular-app

Now, we will try to run a Docker Container using our newly created Angular App Image.

Interactive Mode: To run Docker Container in interactive mode, use the following command. Use “--rm” so Docker Container will be removed automatically when we stop the Container. We will bind the Container Port 4200 to our Local Port 9898 so that we can access the Container from our machine and name the Container as “my-first-angular-container”

sudo docker run -it --rm -p 9898:4200 --name my-first-angular-container my-first-angular-app

-- Output --
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://0.0.0.0:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 49.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.68 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered]
Date: 2019-12-05T11:36:18.526Z - Hash: a7f9dae7b4794e11022f - Time: 14347ms
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

We can browse our Application on http://localhost:9898

Daemon Mode: To run Docker Container in daemon mode, use the following command. Use “ — rm” so Docker Container will be removed automatically when we stop the Container. We will bind the Container Port 4200 to our Local Port 9898 so that we can access the Container from our machine and name the Container as “my-first-angular-container”

sudo docker run -d --rm -p 9898:4200 --name my-first-angular-container my-first-angular-app
sudo docker ps (To see the running container status)
CONTAINER ID        IMAGE                  COMMAND                  CREATED             STATUS              PORTS                    NAMES
e8499929e661        my-first-angular-app   "docker-entrypoint.s…"   10 seconds ago      Up 6 seconds        0.0.0.0:9898->4200/tcp   my-first-angular-container

Cheers!!