Home Explore Blog CI



docker

1st chunk of `content/guides/angular/develop.md`
143850bd39582a8cdc2718899dc7bedb1c0c1ed007d4e6840000000100000bd9
---
title: Use containers for Angular development
linkTitle: Develop your app
weight: 30
keywords: angular, development, node
description: Learn how to develop your Angular application locally using containers.

---

## Prerequisites

Complete [Containerize Angular application](containerize.md).

---

## Overview

In this section, you'll learn how to set up both production and development environments for your containerized Angular application using Docker Compose. This setup allows you to serve a static production build via Nginx and to develop efficiently inside containers using a live-reloading dev server with Compose Watch.

You’ll learn how to:
- Configure separate containers for production and development
- Enable automatic file syncing using Compose Watch in development
- Debug and live-preview your changes in real-time without manual rebuilds

---

## Automatically update services (Development Mode)

Use Compose Watch to automatically sync source file changes into your containerized development environment. This provides a seamless, efficient development experience without restarting or rebuilding containers manually.

## Step 1: Create a development Dockerfile

Create a file named `Dockerfile.dev` in your project root with the following content:

```dockerfile
# =========================================
# Stage 1: Development - Angular Application
# =========================================

# Define the Node.js version to use (Alpine for a small footprint)
ARG NODE_VERSION=22.14.0-alpine

# Set the base image for development
FROM node:${NODE_VERSION} AS dev

# Set environment variable to indicate development mode
ENV NODE_ENV=development

# Set the working directory inside the container
WORKDIR /app

# Copy only the dependency files first to optimize Docker caching
COPY package.json package-lock.json ./

# Install dependencies using npm with caching to speed up subsequent builds
RUN --mount=type=cache,target=/root/.npm npm ci

# Copy all application source files into the container
COPY . .

# Expose the port Angular uses for the dev server (default is 4200)
EXPOSE 4200

# Start the Angular dev server and bind it to all network interfaces
CMD ["npm", "start", "--", "--host=0.0.0.0"]

```

This file sets up a lightweight development environment for your Angular application using the dev server.


### Step 2: Update your `compose.yaml` file

Open your `compose.yaml` file and define two services: one for production (`angular-prod`) and one for development (`angular-dev`).

Here’s an example configuration for an Angular application:

```yaml
services:
  angular-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-angular-sample
    ports:
      - "8080:8080"

  angular-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "4200:4200"
    develop:
      watch:
        - action: sync
          path: .
          target: /app
```
- The `angular-prod` service builds and serves your static production app using Nginx.

Title: Setting Up Development and Production Environments with Docker Compose for Angular
Summary
This section guides you through setting up production and development environments for your containerized Angular application using Docker Compose. It covers configuring separate containers for production and development, enabling automatic file syncing using Compose Watch in development, and debugging and live-previewing changes in real-time. It involves creating a `Dockerfile.dev` for the development environment and updating the `compose.yaml` file to define separate services for production (`angular-prod`) and development (`angular-dev`).