14 December 2021

How to Develop Dockerize Application with Angular and Node JS

How to Develop Dockerize application with Angular and Node JS

Developing your Dockerize Application becomes a lot easier with Angular JS and Node JS. However, before learning how to develop it, it’s a good idea to learn about what Docker is.

What is Docker?

Docker is a seamless platform that lets developers build, run, and deploy large and small applications while on the go. With the help of Docker, you can containerize applications anytime and anywhere.

Docker uses a container-based approach with each container allowing a developer to pack up an application with all of its required parts such as libraries and other dependencies, and ship it out as one package.

Docker Basic architecture

Benefits of using Docker?

Here are some of the benefits of using Docker during your development process:

  • Rapid Deployment
  • Portability
  • Version Control
  • Isolation
  • Security

Prerequisites

There are a few prerequisites for Application Development with Docker. Firstly, we assume the reader has a basic knowledge of development with AngularJS and Node JS. Moreover, the following must be set up in your computer system:

  1. Node (https://nodejs.org/en/download/)
  2. Angular
  3. Docker (https://docs.docker.com/engine/install/)
  4. OS: Windows
  5. You can download the sample application for Angular JS and Node JS from the following link: https://github.com/bbachi/angular-nodejs-example.git

In this blog we will explain the process needed to deploy the complete mean stack application with live examples.

We Will Cover the Following Points:

  1. Introduction.
  2. Dockerizing the sample application from a local machine.
  3. Running and accessing applications on docker.
  4. Conclusion

1. Introduction

  • You can start by Dockerize, and deploy the Docker image with the help of the container orchestration engines such as Docker or Kubernetes. We are going to Dockerize in our example to the app and create an image and run it on Docker on our local machine. We could also push that Image into Docker hub and pull it whenever and wherever we need it.
  • Create Docker image: After installing the sample application, you will have to create a docker image. Following are the commands for the same
// create an image
docker build -t angular-node-image.
// running on Image
docker run -it -p 3080:3080 --name ang-node-ui angular-node-image

2. Dockerize Application from Local Machine

  • FROM : Use the official node image as the base image
  • WORKDIR : Set the working directory
  • RUN : Using RUN install or execute command
  • COPY: Copy folders/file to source to destination place.
  • EXPOSE: Defined port
// build the image
docker build -t angular-node-image .// check the images
docker images

Additional commands

  • Execute the following command to build the angular docker image.
docker build -t angular
  1. Execute the following command to build the node docker image.
docker build -t node
#Run Angular Docker image
docker run -d -it -p 4200:4200/tcp --name angular
#Run Node Docker image
docker run -d -it -p 3000:3000/tcp --name node

Angular Docker configuration file

Node JS configuration file

3. Running and Accessing Application on Docker

Once we have successfully built the image, it’s time to run both applications (Angular and Node JS) with the help of the docker image. We have set and exposed the common port: 3080.

docker run -d -p  3080:3080 --name ang-node-ui angular-node-image
docker ps

Access the docker application
http://localhost:3080.

Wrapping Up

In this blog, we discussed how to develop, run and deploy applications in a docker effective manner. This scalable architecture will surely help to develop and run futuristic, high-level applications on the go. However, if you still have any comments about it, or a question from our DEV IT experts, feel free to contact us or post a comment below.

Back to Index