Dockerizing Angular 8+ application with Nginx-Alpine

In the root folder of your Angular app add three files:

.git
node_modules
dist
/e2e
/docs
.gitignore

### STAGE 1: Build ###
FROM node:alpine AS builder

# set working directory
WORKDIR /app
COPY . .
RUN npm install
RUN npm install -g @angular/cli@8.3.25
RUN ng build --configuration production

## STAGE 2: Run ###
FROM nginx:1.19.4-alpine
COPY --from=builder /app/dist/myapplicationname /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
  }
}

Dockerfile is a multistage build. STAGE 1 builds our angular application.

STAGE 2 copies from STAGE 1 our built angular app and copies the files into what is going to be our running container.

The reason for doing multistage builds is to avoid having all unnecessary files within our docker container, such as build dependencies, build tools, extra files, ..., making our image as small as possible.

Run the build in the root folder of your app:

docker build -t myappname:latest .

Testing the containerized docker image

Simply run the docker container and go to: http://localhost

docker run -p 80:80 -ti myappname:latest

There you have it. Done and done.