Dockerizing angular application

In this post , we will dockerize a simple application designed in angular 7.

Tools used –

  • Docker Toolbox
  • Visual Code Studio
  • npm

Steps required to dockerize the simple angular application are as below -Go to the folder where you want to create angular project

Step 1: Go to the folder where you want to create angular project

Step 2: You need to first install NodeJS and then angular CLI using below command –

npm install -g @angular/cli

Step 3: Once you install angular CLI package from node package manager, you will be able to execute angular commands on console. With below commands you can create new angular project and build it.

  • Create new angular project –

ng new angular-docker-demo

  • Switch to newly created folder by

cd angular-docker-demo

  • You can run the angular project using belwo command –

ng serve

Running application can be access from – http://localhost:80/

Step 4: Now in this step , we will move towards dockerizing the application created in above steps. For that, you need to create docker file as below –

FROM nginx:1.13.3-alpine

## Remove default code for nginx website
RUN rm -rf /usr/share/nginx/html/*

## Copy all build artifacts in dist folder generated after building project into default nginx public folder
COPY /dist /usr/share/nginx/html

#Expose port 80 of container

CMD ["nginx", "-g", "daemon off;"]

First line in docker file i.e. FROM nginx:1.13.3-alpine will download nginx server from docker hub. NGINX (Pronounced as Engine-X) is an open source, lightweight, high-performance web server or proxy server. We would need this server to host our application.

Second line will remove default NGINX website code present under /usr/share/nginx/html/ folder.

After we build our angular project ,build artifacts will be generated under /dist folder . Third line will copy contents of /dist under
/usr/share/nginx/html/ folder and will serve this web content on browser.

Step 5: Below commands will first build the angular application which is PROD ready. Then build the docker image and run that image.

  • ng build --prod
  • docker build -t angular-docker-demo.
  • docker run -p 8082:80 --name angular-docker-demo angular-docker-demo

2 thoughts on “Dockerizing angular application”

Leave a Comment