Angular - How to Dockerize an Angular application

In this post, we will see how to Dockerize an Angular application and how to deploy it in Docker Hub.

ANGULAR PROJECT:
We start creating a new Angular project called “AngularDockerUI” with three components:
ng new AngularDockerUI
ng g c share/menu
ng g c share/homepage
ng g c pages/pagelist

Finally, we install Bootstrap using the command npm install bootstrap and then, we add bootstrap.min.css into the file src/styles.cs:
@import ‘~bootstrap/dist/css/bootstrap.min.css’

Now, we open src/app/app-routing.module.ts and we modify the app-routing:

[APP-ROUTING.MODULE.TS]

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PagelistComponent } from './pages/pagelist/pagelist.component';
import { HomepageComponent } from './share/homepage/homepage.component';
 
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'homepage'},
  { path: 'homepage', component: HomepageComponent },
  { path: 'list', component: PagelistComponent },
  { path: '**', pathMatch: 'full', redirectTo: 'homepage' }  
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then, we open src/app/share/menu/menu.component.html and we add a menu:

[MENU.COMPONENT.HTML]

<nav class="navbar navbar-dark bg-dark mb-5">
  <a class="navbar-brand" routerLink="homepage">HOMEPAGE</a>
  <div class="navbar-expand mr-auto">
    <ul class="nav navbar-nav" routerLinkActive="active">
        <li class="nav-item"><a class="nav-link" routerLink="/list">Page List</a></li>
    </ul>
  </div>
</nav>

Finally, we open src/app/app.component.html and we add here the component menu:

[APP.COMPONENT.HTML]

<app-menu></app-menu>
<router-outlet></router-outlet>

If we run the application, this will be the result:

Now, we add a class called user:

[USER.TS]

export class User {
    id: number;
    userName: string;
    typeUser: string;
    creationDate: string;
 
    constructor(inputId: number, inputUserName: string, inputTypeUser: string, inputCreationDate: string) 
    {
        this.id = inputId;
        this.userName = inputUserName;
        this.typeUser = inputTypeUser;
        this.creationDate = inputCreationDate;
    }
}

Then, we add a service called core, using the command ng g service services/core, where we will add a function to give the list of Users:

import { Injectable } from '@angular/core';
import { User } from '../entities/user';
 
@Injectable({
  providedIn: 'root'
})
export class CoreService {
 
  constructor() { }
 
  GetAllUsers(): Array<User>{
     
    let lstUsers: Array<User> = [];
     
    for(var counter:number = 1; counter<3; counter++)
    {
      var objUser = new User(counter, "UserAdmin"+counter, "Admin", "06/06/2019");
      lstUsers.push(objUser);
    } 
 
    for(var counter:number = 4; counter<7; counter++)
    {
      var objUser = new User(counter, "UserReader"+counter, "Reader", "12/02/2019");
      lstUsers.push(objUser);
    } 
 
    for(var counter:number = 10; counter<14; counter++)
    {
      var objUser = new User(counter, "UserTest"+counter, "Test", "21/04/2019");
      lstUsers.push(objUser);
    } 
     
    return lstUsers
  };
}

Finally, we modify the file pagelist.component, in order to display the list of Users:

[PAGELIST.COMPONENT.TS]

import { Component, OnInit } from '@angular/core';
import { CoreService } from '../../services/core.service';
import { User } from '../../entities/user';
 
@Component({
  selector: 'app-pagelist',
  templateUrl: './pagelist.component.html',
  styleUrls: ['./pagelist.component.css']
})
export class PagelistComponent implements OnInit {
 
  lstUsers: User[];
 
  constructor(private coreservice: CoreService) { }
 
  ngOnInit(): void {
    this.lstUsers = this.coreservice.GetAllUsers();
  }
}

[PAGELIST.COMPONENT.HTML]

<p>List of Users</p>
<table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Id</th>
        <th scope="col">Username</th>
        <th scope="col">TypeUser</th>
        <th scope="col">Creation Date</th>
      </tr>
    </thead>
    <tbody *ngFor="let item of lstUsers; index as i"> 
      <tr>
        <td>{{i+1}}</td>
        <td>{{item.id}}</td>
        <td>{{item.userName}}</td>
        <td>{{item.typeUser}}</td>
        <td>{{item.creationDate}}</td>
      </tr>
    </tbody>
  </table>

Now, if we run the application, this will be the result:

Everything works fine and now, we will Dockerize this application.

DOCKERIZE THE ANGULAR PROJECT:
First of all, I advice to install a useful plug-in for Visual Studio Code, called Docker, that it will help us to create and manage containerized applications:

After the installation, we start creating a Dockerfile into the Angular project:

[DOCKERFILE]

# We use a node.js container to build our application
# We call this contanier 'node'
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod
 
# We move our builded application into a nginx container
FROM nginx:alpine
# we can take the value of our "outputPath" into angular.json file
COPY --from=node /app/dist/AngularDockerUI /usr/share/nginx/html

Now, we click the right mouse button and we select the option “Command Palette” and then, we run the Docker command Images build:

We insert the name and the tag of our image:

and finally, we press Enter in order to create our Docker image:

Then, in order to verify everything worked fine, we will run our Docker image:

Now, if we open e browser and we go to http://localhost, this will be the result:

UPLOAD DOCKER IMAGE ON DOCKER HUB:
First of all, we run the Docker command Images Tag:

It is important to add our Docker Hub UserId into the Tag image:

Now, we push the image into Docker Hub, using the Docker command Images Push:

When the process is over, we will see the new image into our Docker Hub:

RUN THE ANGULAR DOCKER IMAGE IN ANOTHER COMPUTER:
In order to verify everything works fine, we will run our new Docker image in another computer, using the command
docker run -p 80:80 commander2020/testdockerui:v1

Now, if we open a browser and we go to http://localhost/homepage, this will be the result:

Angular – How to Dockerize an Angular application

Leave a Reply Cancel reply