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.
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.
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.
docker version in your command line to confirm if Docker was successfully installed.
If the installation was successful, you should see the following message:
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:
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.
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
- Navigating to the
- Copying the
package.jsonfile from our
projectdirectory to the
- Inside the
appfolder, we are installing the dependencies by running the
- 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
- Copying all the
buildcontents to the configured
4200as our container
80as our host port.
Setting up a docker-compose.yml file
At the root of the project, create a file and name it
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.7for the compose file.
- In the
servicessection, 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-composefile as the <name_of_your_service>. In our case, it is
The build command should look as shown below:
docker-compose build angular-service
After all the steps are finalized, run the following command to initialize all the
services specified in the
The dockerized AngularJS application is now up and running. You can access the containerized application from your browser by navigating to
You can confirm your
Docker build image by running the following command:
With the image set, you can deploy it to Dockerhub or share it with teammates.
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.
- Getting Started with Docker
- Managing and Running Docker Containers
- Building A Node.js Application Using Docker
- Getting Started with MariaDB Using Docker and Node.js
- Containerizing WordPress with Docker-Compose
- How to Deploy Docker Container to a Kubernetes Cluster
- How to Share Data Between Docker Containers
Peer Review Contributions by: Wanja Mike