Dockerize Angular Application using NGINX + Check docker container error

Angular Introduction

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. Angular (also referred to as Angular 2+) is a web development platform built in TypeScript that provides developers with robust tools for creating the client side of web applications.

The strong sides of Angular include:

• Detailed documentation. Angular boasts detailed documentation where developers can find all necessary information without asking their colleagues. As a result, developers can quickly come up with technical solutions and resolve emerging issues.
• Component-based architecture. In the second version, Angular shifted from an MVC to a component-based architecture. According to this architecture, an app is divided into independent logical and functional components. These components can easily be replaced and decoupled as well as reused in other parts of an app. In addition, component independence makes it easy to test a web app and ensure that every component works seamlessly.
• Ahead-of-time compiler. Angular’s AOT compiler converts TypeScript and HTML into JavaScript during the build process. This means that code is compiled before the browser loads your web app so that it’s rendered much faster. An AOT compiler is also much more secure than a just-in-time (JIT) compiler.
• CLI. It is probably the most beloved feature for the majority of Angular developers. It automates the whole development process making app initialization, configuration, and development as easy as possible. The Angular CLI allows you to create a new Angular project, add features to it, and run unit and end-to-end tests with a few simple commands. It not only increases code quality but also greatly facilitates development.
• Angular Material. This collection of Material Design elements optimized for Angular lets developers easily integrate UI components.
• Dependency injection. is quite an arguable advantage of Angular. In plain English, dependency injection refers to one object supplying the dependencies of another object. These dependencies define how various components are connected and show how changes in one part of the code affects other parts. On the one hand, using dependency injection makes code more readable and maintainable. It can greatly reduce the time spent testing and hence cut the costs of web development. Starting from version 2, Angular provides developers with a separate tree of dependency injectors that can be changed or replaced without reconfiguring all components. But on the other hand, dependency injection may be time-consuming and it may be hard to create dependencies for components.

Docker: Introduction

Docker is an open-source project for automating the deployment of applications as portable, self-sufficient containers that can run on the cloud or on-premises. It is a great tool to make it easier to create, deploy and run applications by using containers to do such tasks.

Containers are the idea of running multiple applications on a single host. It’s similar to compute virtualization, but instead of virtualizing a server to create multiple operating systems, containers offer a more lightweight alternative by essentially virtualizing the operating system, allowing multiple workloads to run on a single host.

Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package. By doing so, thanks to the container, the developer can rest assured that the application will run on any other machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.

Prerequisites

• Windows 10
• Docker for Windows
• Node JS
• Visual Studio Code

Docker Installation

• Download docker from download.docker.com then install it
• If your computer have Hyper-V and Containers windows features disabled, docker will ask you to enable them and then will restart your computer automatically. Go ahead and let docker enable these features for you.

• Configure your docker by right click on docker icon , then click “Settings”

• Navigate to “Resources” tab, for good performance, please set Memory minimum to “2 GB”

• Navigate to “File Sharing”, check the drive that you use for your code and all configuration are done

Create Angular Application

• Install Node.js
• Open Command Prompt, check if your node.js is installed correctly by below command

node -v

If it display node.js version, then you have installed it correctly

• Install Angular CLI by running below command on command prompt

npm install -g @angular/cli

• Navigate to the directory that you want your project to be initialized, then run below command

ng new angular-docker

Choose your angular setting (routing and style) and wait till the project creation finished

• Navigate to your angular workspace folder, in my case angular-docker, then run below command to run angular web project in default port (4200)

ng serve

If you want to run angular project in specific port, you could use below command

ng serve --port [Port Number]
e.g
ng serve --port 4600

• Open your browser and navigate to http://localhost:4200, it will display your angular web page

Dockerize Angular application

Now let’s dockerize your angular application by following below steps

• Create new file “default.conf” this file is used for nginx configuration file, put below code on default.conf content

server {
      listen 80;
      server_name localhost;
 
      root   /usr/share/nginx/html;
      index  index.html index.htm;
  
  location / {
   try_files $uri $uri/ /index.html;
  }
 }

• Create new file “Dockerfile” on angular workspace folder, in my case inside angular-docker folder, and put below code on Dockerfile content

# stage 1
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
# stage 2
FROM nginx:latest
COPY default.conf /etc/nginx/conf.d
COPY --from=node /app/dist /usr/share/nginx/html

So first docker will download latest node.js then copy all files inside angular workspace, after that it will install angular dependencies and run angular project, then it will download nginx then copy default.conf to nginx configuration folder and copy all compiled files from dist folder to nginx html folder

So you will have 2 new files (default.conf and Dockerfile) inside your angular workspace folder

• Open angular project, navigate to angular.json file, on “outputPath”, change the value to “dist”

• Open command prompt, navigate to your angular workspace folder, run below command to build docker image. Note : Docker image name should be lowercase and no space

docker build -t [docker image name] .

or if your Docker file name is not “Dockerfile”, you could use argument -f [Dockerfile name]

docker build -t [docker image name]-f [Dockerfile name].

I will give docker image name = “angular-docker” , so my command is

docker build -t angular-docker .

Wait till the download and build process finished

• You could make sure if your docker image is created successfully by below command

docker images

• Then you could run container by attaching your docker image to container on port 80 by below command

docker run -d -p 8080:80 --name [Docker Container Name] [Docker Image Name]

Below is my command

docker run -d -p 8080:80 --name AngularDocker angular-docker

• You could check if your container is running or not by below command

docker ps -a

If status is “Up”, then your container is running well. but if status is Exited, then you need to check the error log, you could check docker container error log by using below command

docker logs --tail 100 -f [Docker Container ID]

In my case

docker logs --tail 100 -f 64397dac0357

• Now you could open your browser and navigate to http://localhost:8080/. Port 8080 is used because when we run docker container, we expose port 8080

If on http://localhost:8080 display nginx welcome page, then there is some mistake on your nginx config file or angular.json , please check again on your nginx config or angular.json file

Re-dockerize Docker Image

If you want to re-dockerize docker image, you need to do below steps

• Stop Docker Container that have the docker image

docker stop [Docker Container Name]

In my case

docker stop AngularDocker

• Then remove Docker Container by using below command

docker rm[Docker Container Name]

In my case

docker rm AngularDocker

• Then run container again by below command

docker run -d -p 8080:80 --name [Docker Container Name] [Docker Image Name]

In my case

docker run -d -p 8080:80 --name AngularDocker angular-docker

Thanks for reading