DEV Community

Cover image for 🚢 How to Dockerize Your Existing Angular Application
Suliman Munawar khan
Suliman Munawar khan

Posted on

🚢 How to Dockerize Your Existing Angular Application

#angular #docker #frontend #webdev

Tired of hearing “It works on my machine”?

Let's fix that.

Dockerizing your Angular app helps you:

  • Package it with all dependencies
  • Run it consistently on any machine
  • Simplify deployment

In this guide, you'll learn how to containerize your Angular app using Docker, step-by-step — even if you're new to Docker.

🧰 Prerequisites

Make sure you have:

  • ✅ Node.js and Angular CLI installed
  • ✅ Docker installed and running Download Docker
  • ✅ An existing Angular app (any version works)

🏗 Step 1: Build Your Angular App for Production

Angular apps need to be built before being served in production.

ng build --configuration production
Enter fullscreen mode Exit fullscreen mode

📁 Step 2: Create Your Dockerfile

Inside the root of your Angular project, create a file named: Dockerfile

Paste the following content:

# Stage 1: Build the Angular app
FROM node:18-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
RUN npm run build -- --configuration production

# Stage 2: Serve the app using NGINX
FROM nginx:1.23-alpine

COPY --from=build /app/dist/* /usr/share/nginx/html

# Copy custom nginx config (optional)
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

📝 Notes:

  • First stage builds the Angular app using Node.js
  • Second stage serves the build with a lightweight NGINX server
  • We expose port 80 so Docker knows where the app runs

🌐 Step 3 (Optional): Add a Custom NGINX Config

You can skip this if the default is fine. But for SPAs (like Angular), custom routing helps avoid 404 errors on refresh.

Create a file: nginx.conf
Add:

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  error_page 404 /index.html;
}
Enter fullscreen mode Exit fullscreen mode

📦 Step 4: Add .dockerignore

To speed up the build and avoid copying unnecessary files, create a .dockerignore file:

node_modules
dist
.git
.gitignore
Dockerfile
README.md
Enter fullscreen mode Exit fullscreen mode

🧪 Step 5: Build Your Docker Image

From the root folder of your project, run:

docker build -t my-angular-app .
Enter fullscreen mode Exit fullscreen mode

It will:

  • Install dependencies
  • Build the Angular app
  • Create a lightweight image ready to run

🚀 Step 6: Run Your Container

After the build completes:

docker run -d -p 8080:80 my-angular-app
Enter fullscreen mode Exit fullscreen mode

Visit:
👉 http://localhost:8080

You should see your Angular app running in a Docker container!

🧼 Bonus: Clean Up

To stop the container:

docker ps  # Find the container ID
docker stop <container-id>
Enter fullscreen mode Exit fullscreen mode

🌍 Deploying to the Cloud?

Now that your Angular app is dockerized, you can:

  • Push it to Docker Hub or GitHub Container Registry
  • Deploy it to Azure App Service, AWS ECS, Google Cloud Run, etc.

👋 About Me

I’m a frontend developer working with Angular, React, and AI-assisted tools. I love writing clean, scalable code and sharing what I learn along the way.

Let’s connect in the comments — and don’t forget to ❤️ the post if you found it useful!

Happy Dockering!

Top comments (0)