Dockerize Angular App

Agenda

Dockerize an Angular app, built with the Angular CLI, using Docker, In this blog we will have a walkthrough of angular 7 and dockerize it over node image(base).

Here, we 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

Project Setup

Install the Angular CLI globally:

npm install -g @angular/cli@7.3.10

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/cli@7.3.10

# 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

Please react if you found this blog helpful and informational.

Comments

[Victugord]

Bad advice.
You should not use ng serve for production because it use webpack-dev-server that is build for development only.

You should use nginx inside the docker container

[jzombie]

He does mention "Create an image for dev environment with code Hot-reloading"...

[Indra Kumar]

Very Helpful. Easy Steps 👍

[himmat-fidelesys]

Very Helpful. Easy Steps 👍

[Prem Purswani]

Very easy to follow and precise steps 👍