Containers

How to Containerize an AngularJS Application Featuring Nginx Using Docker Containers

Docker is a platform that enables you to build, manage, and ship applications. These applications are usually installed in specific areas known as containers. Unlike traditional VMs, Docker containers are super light and less resource-intensive.

Introduction

Docker containers allow developers to package an application along with all of its necessary components, including dependencies and other libraries and distribute it as a single package. This enables the software to function the same way on different platforms or operating systems. In this article, we will learn how to containerize an AngularJS application.

AngularJS is a JavaScript front-end framework for building innovative and advanced web apps. It uses the same technologies as React.js and Vue.js. AngularJS can also be used to create back-end APIs, as well as full-stack applications.

Objective

In this guide, we'll set up a simple Docker-compose script to containerize our AngularJS application

Setting the local environments

To start with, install Docker on your computer. You can follow this tutorial to get started with Docker.

If you are using Windows OS, you can download and install Docker desktop from here.

Next, run docker version in your command line to confirm if Docker was successfully installed.

If the installation was successful, you should see the following message:

Install docker version

Go ahead and download the AngularJS application from this repository.

Alternatively, you can clone the repository using the following command:

git clone https://github.com/Rose-stack/dockerizing-an-angular-app.git

After a successful clone, install the dependencies of the application by running:

npm install

Creating a Dockerfile

A Dockerfile is a text file that contains instructions for creating a Docker image.

At the root of the cloned AngularJS project, create a Dockerfile, as shown below.

Angular dockerfile

Some of the important Docker commands that we will use include:

FROM - It creates a build process and pulls the most recent image from DockerHub.
RUN - It executes and adds a new layer to the base image.
WORKDIR - It specifies the preferred working folder in which the configuration files will be stored. If the path cannot be found, the directory will be created.
COPY - This command copies the project's source files from the host's root folder to the container's working directory.
EXPOSE - It specifies a network port to notify Docker that a container will listen on a specific port number at runtime.

Let's write down the Dockerfile instructions.

Step 1 - Setting up Node.js

Add the following commands inside the Dockerfile:

    FROM node:14.17.0-alpine as build-step
    RUN mkdir -p /app
    WORKDIR /app
    COPY package.json /app
    RUN npm install
    COPY . /app
    RUN npm run build --prod

In the commands above, we are:

Retrieving a Node.js image from DockerHub version 14.17.0.
Then, we are creating a directory called app.
Navigating to the app folder.
Copying the package.json file from our project directory to the app directory.
Inside the app folder, we are installing the dependencies by running the npm install command.
Copying the other contents of the project folder to the app folder.
Finally, we build the project in the app folder.

Step 2 - Setting up Nginx server

Nginx is a C-based open-source web browser server that also functions as a reverse proxy and load balancer. In this article, we are observing Angular files using the Nginx server.

    FROM nginx:1.20.1
    COPY --from=build-step /app/dist/ng-docker-example /usr/share/nginx/html
    EXPOSE 4200:80

In the commands above, we are:

Getting an Nginx image from Dockerhub version 1.20.1.
Copying all the build contents to the configured Nginx HTML folder.
Exposing 4200 as our container port and 80 as our host port.

Setting up a docker-compose.yml file

At the root of the project, create a file and name it docker-compose.yml.

Angular docker-compose file

Add the following contents to the file:

version: "3.7"
services:
    angular-service:
       container_name: ng-docker-example
       build: .
       ports:
           - "4200:80"

Let's now understand what the above components do:

We will use version 3.7 for the compose file.
In the services section, we define our application's services which in our case is angular-service. We also state the container name, the build folder, as well as appropriate ports.

Testing the containerized AngularJS application

From your terminal (at the root of the project), build your image by running:

    docker-compose build <name_of_your_service>

Enter the name of the service specified in the docker-compose file as the <name_of_your_service>. In our case, it is angular-service.

The build command should look as shown below:

docker-compose build angular-service

Angular docker build

After all the steps are finalized, run the following command to initialize all the services specified in the docker-compose file:

docker-compose up

Angular docker-compose up

The dockerized AngularJS application is now up and running. You can access the containerized application from your browser by navigating to http://localhost:4200.

Dockerized AngularJS app

You can confirm your Docker build image by running the following command:

docker images

Angular docker images

With the image set, you can deploy it to Dockerhub or share it with teammates.

Conclusion

Docker virtualization is indeed an incredible technology. It can be used to virtualize almost any sort of application. AngularJS is mainly used to develop frontend web designs. However, you can still use it with backend technologies such as Node.js. The fun part is that you can still dockerize it as a full-stack application.