A Multi-stage Dockerfile for Angular

How to write a multi-purpose Dockerfile for Angular Projects

Node Dockerfile for Angular development

In this story, I am trying to show how to write a Dockerfile for an Angular project that supports both development and production goals.

I took this tutorial here and changed it to fit in my project and environment requirements.

I want to have an independent environment for Angular from my host machine. Why? Because Angular releases new versions very quickly that my team and project cannot match its speed. There are other reasons as well :).

Let’s see what I have changed here.

First of all, I need to have a very typical Nodejs enabled image and I will install my library baskets in it.

FROM node:10 AS developer
# Install system dependencies
RUN apt-get update && apt-get install -y \
    git \
    curl
# Install Angular CLI
RUN npm install -g @angular/cli@10
# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*
FROM node:10-alpine AS builder
COPY package.json ./
RUN yarn && mkdir /app && mv ./node_modules ./app
WORKDIR /app
COPY . .
RUN $(npm bin)/ng build --prod --output-path=dist
FROM nginx:1.14.1-alpine
COPY  nginx/default.conf /etc/nginx/conf.d/
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

Second, for the build, which I’d like to use as a replacement for my build pipelines, I am using an Alpine image. As you can see here, I am using yarn instead of npm which is obvious.

And finally, again an Alpine image will host the production version of my application.

Note: The Nginx is using the following file as defulat.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;
  }
}

If you are curious to see how it looks like at the end check this out

ng build — prod

Please See here how to create a .Net Core Dockerfile.