What is Docker?🧠

  • Imagine shipping your entire application including its OS, environment, dependencies, and code as one neatly packaged box. That’s Docker in a nutshell.

  • Docker is a platform that allows you to create, deploy, and run applications in isolated environments called containers. These containers ensure your app works the same across development, testing, staging, and production regardless of the host OS.

Why Docker for Angular?📦

  • No more “but it works on my machine!” bugs

  • Clean, reproducible dev environments

  • Easy deployment to cloud platforms

  • Lightweight and fast compared to VMs(Virtual Machines)

Getting Started with Docker🚀

✅ Install Docker

docker --version

Essential Docker Commands🛠️ 

docker build -t your-app-name .
docker run -p 3000:3000 your-app-name
docker ps        # list running containers
docker stop

Dockerizing an Angular 17+ Project 🧑‍💻

Step 1: Build Your Angular App 🏗️ 

ng build --configuration production
  • Output will go to: dist/your-app-name/browser

Step 2: Create a Dockerfile 📁 

# Build stage
FROM node:18 AS build

WORKDIR /app

# Copy package.json and package-lock.json to leverage Docker cache
COPY package*.json ./

# Install dependencies
RUN npm install --legacy-peer-deps 

# Install additional dependencies
RUN npm install ngx-bootstrap google-libphonenumber --legacy-peer-deps

# Copy project files
COPY . .

# Build the Angular application with production configuration
RUN npm run build -- --configuration production

# Serve stage
FROM node:18-slim

# Install a lightweight static server
RUN npm install -g serve

WORKDIR /app/dist/your-app-name/browser

# Copy the built Angular app from the previous stage
COPY --from=build /app/dist/your-app-name/browser .

# Expose the default serve port
EXPOSE 3000

# Run the app with serve
CMD ["serve", "-s", ".", "-l", "3000"]

🔁 Replace your-app-name with the actual folder name inside dist.

Step 3: Build and Run the Container 🚀

  • Build the Docker image 
docker build -t angular-demo .
  • Run the container 
docker run -p 3000:3000 angular-demo
  • Open in browser

Go to 👉 http://localhost:3000

Bonus: Docker for Development (Optional) 🎁

  • Want live-reloading while developing?
  • Mount your project folder as a volume
  • Use Angular CLI inside the container
  • Use ng serve --host 0.0.0.0

Conclusion 🧾

Docker and Angular make a powerful combo for modern web development. Whether you're deploying to the cloud or just keeping your local dev environment tidy, containers are the way to go. With Angular 17’s new standalone module system and enhanced performance, it's the perfect time to containerize your app and scale your skills.