DEV Community

Cover image for Dockerize Angular App
Abhishek S. Sharma
Abhishek S. Sharma

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

ng new angular-microservice 
cd angular-microservice
Enter fullscreen mode Exit fullscreen mode

(optional)To generate in present dir use:

ng new angular-microservice –directory ./
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Building Docker image

docker build -t angular-microservice:dev .
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Please react if you found this blog helpful and informational.

Discussion (5)

Collapse
victugord profile image
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

Collapse
jzombie profile image
jzombie

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

Collapse
indrakuma_r profile image
Indra Kumar

Very Helpful. Easy Steps 👍

Collapse
himmatfidelesys profile image
himmat-fidelesys

Very Helpful. Easy Steps 👍

Collapse
prempurswani3 profile image
Prem Purswani

Very easy to follow and precise steps 👍