Prerequisites

NodeJS +6.9

Angular CLI (npm i -g @angular/cli@latest)

Docker 17.05

Basic understanding of Docker and Angular CLI commands

The plan

To Dockerize a basic Angular app built with Angular CLI we need to do the following:

npm install the dependencies (Dev dependencies included) ng build with --prod flag move the artifacts from dist folder to a publicly accessible folder (via an an nginx server) Setup an an nginx config file, and spin up the http server

We’ll do this in 2 stages:

Build stage: will depend on a Node alpine Docker image Setup Stage: will depend on NGINX alpine Docker image and use the artifacts from the build stage, and the nginx config from our project.

Initialize an empty Angular project

$ ng new myapp

Add a default nginx config

At the root of your angular project create nginx folder and create a file named default.conf with the following contents (./nginx/default.conf):

server {



listen 80;



sendfile on;



default_type application/octet-stream;





gzip on;

gzip_http_version 1.1;

gzip_disable "MSIE [1-6]\.";

gzip_min_length 1100;

gzip_vary on;

gzip_proxied expired no-cache no-store private auth;

gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip_comp_level 9;





root /usr/share/nginx/html;





location / {

try_files $uri $uri/ /index.html =404;

}



}

Create the Docker file

### STAGE 1: Build ###



# We label our stage as ‘builder’

FROM node:10-alpine as builder



COPY package.json package-lock.json ./



## Storing node modules on a separate layer will prevent unnecessary npm installs at each build

RUN npm i && mkdir /ng-app && mv ./node_modules ./ng-app



WORKDIR /ng-app



COPY . .



## Build the angular app in production mode and store the artifacts in dist folder

RUN $(npm bin)/ng build --prod --output-path=dist





### STAGE 2: Setup ###



FROM nginx:1.14.1-alpine



## Copy our default nginx config

COPY nginx/default.conf /etc/nginx/conf.d/



## Remove default nginx website

RUN rm -rf /usr/share/nginx/html/*



## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder

COPY --from=builder /ng-app/dist /usr/share/nginx/html



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

Build the image

$ docker build -t myapp .

Run the container

$ docker run -p 8080:80 myapp

And done, your dockerized app will be accessible at http://localhost:8080

And the size of the image is only 15.8MB, which will be even less once pushed to a Docker repository.