Dockerizing Angular app

 

Prerequisites

Make sure you have:

• Angular CLI installed (npm install -g @angular/cli)
• Docker installed and running
• A working Angular project (ng new my-app if starting fresh)
• These steps are for Angular apps using angular 17+
• For earlier versions, changes in the docker file will be required

 Step 1: Build Your Angular App

ng build --configuration production

This creates a dist/ folder with your production-ready files.

Step 2: Create a Dockerfile

Create a default.conf for creating nginx custom configurations

server {

  listen 80;

  server_name localhost;

  root /usr/share/nginx/html;

  index index.html;

  location / {

    try_files $uri $uri/ /index.html;

  }

}

In your project root, create a file named Dockerfile:

# Stage 1: Build the Angular app

FROM node:20-alpine AS builder

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

# Stage 2: Serve with Nginx

FROM nginx:alpine

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

COPY --from=builder /app/dist/angular-docker-app/browser /usr/share/nginx/html

EXPOSE 80

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

Replace my-app with your actual Angular project name inside dist/.

Step 3: Create .dockerignore

To keep your image lean:

node_modules
dist
.git
Dockerfile
.dockerignore

Step 4: Build the Docker Image

docker build -t angular-docker-app .

Step 5: Run the Container

docker run -d -p 8080:80 angular-docker-app

Now visit http://localhost:8080 to see your app live in a container!