Dockerize Angular 7 App

Agenda

 Dockerize an Angular app, built with the Angular CLI, using Docker, In this blog we wanna have a walkthrough angular 7 and dockerize it over node image(base). here We’ll specifically focus on:

  1. Create an angular app using cli and test it locally
  2. Create an image for dev environment with code Hot-reloading.

Topic Cover

Project Setup

Install the Angular CLI globally :

npm install -g @angular/[email protected]

Generate a new app aka “angular-microservice” using CLI :

ng new angular-microservice 
cd angular-microservice
  • (optional )To generate in present dir use : ng new angular-microservice –directory ./

Docker Setup

Add a Dockerfile to the project root:

# base image
FROM node:12.2.0

# set working directory
WORKDIR /app
# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/[email protected]

# add app
COPY . /app

# start app
CMD ng serve --host 0.0.0.0

Building Docker image

docker build -t angular-microservice:dev .

Run Docker Image

Run the container after the build is done:

docker run -d -v ${PWD}:/app -v /app/node_modules -p 4201:4200 --rm angular-microservice:dev

Use the -d flag to run the container in the background:

docker run -d -v ${PWD}:/app -v /app/node_modules -p 4201:4200 --name foo --rm angular-microservice:dev