Utiliza contenedores para el desarrollo con React.js

Tabla de contenidos

Prerrequisitos

Completa Contenerizar una aplicación de React.js.

En esta sección, aprenderás cómo configurar entornos tanto de producción como de desarrollo para tu aplicación de React.js contenerizada utilizando Docker Compose. Esta configuración te permite servir una compilación de producción estática a través de Nginx y desarrollar de manera eficiente dentro de contenedores utilizando un servidor de desarrollo con recarga en vivo mediante Compose Watch.

Aprenderás cómo:

Configurar contenedores separados para producción y desarrollo
Habilitar la sincronización automática de archivos utilizando Compose Watch en desarrollo
Depurar y previsualizar en vivo tus cambios en tiempo real sin reconstrucciones manuales

Actualiza automáticamente los servicios (modo de desarrollo)

Utiliza Compose Watch para sincronizar automáticamente los cambios en los archivos fuente con tu entorno de desarrollo contenerizado. Esto proporciona una experiencia de desarrollo fluida y eficiente sin necesidad de reiniciar o reconstruir los contenedores manualmente.

Paso 1: Crea un Dockerfile de desarrollo

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

# =========================================
# Etapa 1: Desarrollar la aplicación de React.js
# =========================================
ARG NODE_VERSION=24.12.0-alpine

# Utilizar una imagen ligera de Node.js para el desarrollo
FROM node:${NODE_VERSION} AS dev

# Establecer el directorio de trabajo dentro del contenedor
WORKDIR /app

# Copiar primero los archivos relacionados con paquetes para aprovechar el mecanismo de almacenamiento en caché de Docker
COPY package.json package-lock.json* ./

# Instalar las dependencias del proyecto
RUN --mount=type=cache,target=/root/.npm npm install

# Copiar el resto del código fuente de la aplicación dentro del contenedor
COPY . .

# Exponer el puerto utilizado por el servidor de desarrollo de Vite
EXPOSE 5173

# Utilizar un comando predeterminado, se puede sobrescribir en el archivo Docker compose.yml
CMD ["npm", "run", "dev"]

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

Paso 2: Actualiza tu archivo `compose.yaml`

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

Aquí tienes una configuración de ejemplo para una aplicación de React.js:

services:
  react-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-reactjs-sample
    ports:
      - "8080:8080"

  react-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

El servicio react-prod compila y sirve tu aplicación estática de producción usando Nginx.
El servicio react-dev ejecuta tu servidor de desarrollo de React con recarga en vivo y reemplazo de módulos en caliente (HMR).
watch activa la sincronización de archivos con Compose Watch.

Note
Para obtener más detalles, consulta la guía oficial: Usar Compose Watch.

Paso 3: Actualiza vite.config.ts para asegurarte de que funcione correctamente dentro de Docker

Para hacer que el servidor de desarrollo de Vite funcione de manera confiable dentro de Docker, debes actualizar tu archivo vite.config.ts con la configuración correcta.

Abre el archivo vite.config.ts en la raíz de tu proyecto y actualízalo de la siguiente manera:

/// <reference types="vitest" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    strictPort: true,
  },
});

Note
Las opciones de server en vite.config.ts son esenciales para ejecutar Vite dentro de Docker:
host: true permite que el servidor de desarrollo sea accesible desde fuera del contenedor.
port: 5173 establece un puerto de desarrollo coherente (debe coincidir con el expuesto en Docker).
strictPort: true garantiza que Vite falle claramente si el puerto no está disponible, en lugar de cambiar de puerto silenciosamente.
Para obtener todos los detalles, consulta la documentación de configuración del servidor de Vite.

Al finalizar los pasos anteriores, el directorio de tu proyecto debería contener los siguientes archivos:

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

Paso 4: Inicia Compose Watch

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

$ docker compose watch react-dev

Paso 5: Prueba Compose Watch con React

Para verificar que Compose Watch está funcionando correctamente:

Abre el archivo src/App.tsx en tu editor de texto.
Localiza la siguiente línea:
<h1>Vite + React</h1>

Cámbiala por:

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

Guarda el archivo.
Abre tu navegador en http://localhost:5173.

Deberías ver aparecer 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 están funcionando como se espera.

Resumen

En esta sección, configuraste un flujo de trabajo completo de desarrollo y producción para tu aplicación de React.js utilizando Docker y Docker Compose.

Esto es lo que lograste:

Creaste un Dockerfile.dev para agilizar el desarrollo local con recarga en caliente
Definiste servicios separados react-dev y react-prod en tu archivo compose.yaml
Habilitaste la sincronización de archivos en tiempo real usando Compose Watch para una experiencia de desarrollo más fluida
Verificaste que las actualizaciones en vivo funcionaran sin problemas modificando y previsualizando un componente

Con esta configuración, ahora estás equipado para construir, ejecutar e iterar en tu aplicación de React.js completamente dentro de contenedores, de manera eficiente y coherente en todos los entornos.

Recursos relacionados

Profundiza tus conocimientos y mejora tu flujo de trabajo de desarrollo contenerizado con estas guías:

Uso de Compose Watch – Sincroniza automáticamente los cambios de código fuente durante el desarrollo
Compilaciones de múltiples etapas – Crea imágenes de Docker eficientes y listas para producción
Mejores prácticas para Dockerfiles – Escribe Dockerfiles limpios, seguros y optimizados.
Referencia del archivo Compose – Conoce la sintaxis completa y las opciones disponibles para configurar servicios en compose.yaml.
Volúmenes de Docker – Persiste y administra datos entre ejecuciones de contenedores

Próximos pasos

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

Ejecuta pruebas de React.js en un contenedor »

¿En qué te puedo ayudar?

Utiliza contenedores para el desarrollo con React.js