# Usar contenedores para el desarrollo con Angular


## Requisitos previos

Completa [Containerizar una aplicación Angular](/guides/angular/develop/containerize/).

---

## Descripción general

En esta sección aprenderás a configurar entornos de producción y desarrollo para tu aplicación Angular containerizada con Docker Compose. Esta configuración te permite servir una compilación de producción estática con Nginx y desarrollar de forma eficiente dentro de contenedores con un servidor de desarrollo con recarga en vivo y Compose Watch.

Aprenderás a:

- Configurar contenedores separados para producción y desarrollo
- Activar la sincronización automática de archivos con Compose Watch en desarrollo
- Depurar y previsualizar cambios en tiempo real sin reconstrucciones manuales

---

## Actualizar servicios automáticamente (modo desarrollo)

Usa Compose Watch para sincronizar automáticamente los cambios de archivos fuente en tu entorno de desarrollo containerizado. Esto ofrece una experiencia de desarrollo fluida y eficiente sin reiniciar ni reconstruir contenedores manualmente.

## Paso 1: Crear un Dockerfile de desarrollo

Crea un archivo llamado `Dockerfile.dev` en la raíz del proyecto con el siguiente contenido:

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

# Define the Node.js version to use (Alpine for a small footprint)
ARG NODE_VERSION=24.12.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 install

# 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"]

```

Este archivo configura un entorno de desarrollo ligero para tu aplicación Angular usando el servidor de desarrollo.

### Paso 2: Actualizar tu archivo `compose.yaml`

Abre tu archivo `compose.yaml` y define dos servicios: uno para producción (`angular-prod`) y otro para desarrollo (`angular-dev`).

Aquí tienes un ejemplo de configuración para una aplicación Angular:

```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
```

- El servicio `angular-prod` compila y sirve tu aplicación de producción estática con Nginx.
- El servicio `angular-dev` ejecuta tu servidor de desarrollo de Angular con recarga en vivo y hot module replacement.
- `watch` activa la sincronización de archivos con Compose Watch.

> [!NOTE]
> Para más detalles, consulta la guía oficial: [Usar Compose Watch](/compose/how-tos/file-watch/).

Tras completar los pasos anteriores, el directorio del proyecto debería contener los siguientes archivos:

```text
├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md
```

### Paso 4: Iniciar Compose Watch

Ejecuta el siguiente comando desde la raíz del proyecto para iniciar el contenedor en modo watch:

```console
$ docker compose watch angular-dev
```

### Paso 5: Probar Compose Watch con Angular

Para comprobar que Compose Watch funciona correctamente:

1. Abre el archivo `src/app/app.component.html` en tu editor de texto.

2. Localiza la siguiente línea:

   ```html
   <h1>Docker Angular Sample Application</h1>
   ```

3. Cámbiala por:

   ```html
   <h1>Hello from Docker Compose Watch</h1>
   ```

4. Guarda el archivo.

5. Abre el navegador en [http://localhost:4200](http://localhost:4200).

Deberías ver el texto actualizado al instante, sin necesidad de reconstruir el contenedor manualmente. Esto confirma que la observación de archivos y la sincronización automática funcionan como se espera.

---

## Resumen

En esta sección configuraste un flujo de trabajo completo de desarrollo y producción para tu aplicación Angular con Docker y Docker Compose.

Esto es lo que lograste:

- Crear un `Dockerfile.dev` para agilizar el desarrollo local con recarga en caliente
- Definir servicios `angular-dev` y `angular-prod` separados en tu archivo `compose.yaml`
- Activar la sincronización de archivos en tiempo real con Compose Watch para una experiencia de desarrollo más fluida
- Comprobar que las actualizaciones en vivo funcionan modificando y previsualizando un componente

Con esta configuración puedes compilar, ejecutar e iterar tu aplicación Angular íntegramente en contenedores, de forma eficiente y consistente en todos los entornos.

---

## Recursos relacionados

Profundiza con estas guías y mejora tu flujo de desarrollo containerizado:

- [Usar Compose Watch](/compose/how-tos/file-watch/) – Sincroniza cambios de código automáticamente durante el desarrollo
- [Compilaciones multi-etapa](/build/building/multi-stage/) – Crea imágenes Docker eficientes y listas para producción
- [Buenas prácticas para Dockerfiles](/build/building/best-practices/) – Escribe Dockerfiles limpios, seguros y optimizados.
- [Referencia del archivo Compose](/compose/compose-file/) – Aprende la sintaxis completa y las opciones para configurar servicios en `compose.yaml`.
- [Volúmenes de Docker](/storage/volumes/) – Persiste y gestiona datos entre ejecuciones de contenedores

## Próximos pasos

En la siguiente sección aprenderás a ejecutar pruebas unitarias de tu aplicación Angular dentro de contenedores Docker. Esto garantiza pruebas consistentes en todos los entornos y elimina dependencias de la configuración de tu máquina local.