Configurar un archivo de configuración para desarrollo web

Flutter web incluye un servidor de desarrollo que sirve por defecto tu aplicación en el dominio localhost usando HTTP en un puerto asignado aleatoriamente. Aunque los argumentos de la línea de comandos ofrecen una forma rápida de modificar el comportamiento del servidor, este documento se centra en un enfoque más estructurado: definir el comportamiento de tu servidor a través de un archivo web_dev_config.yaml centralizado. Este archivo de configuración te permite personalizar los ajustes del servidor —host, puerto, ajustes de HTTPS y reglas de proxy— garantizando un entorno de desarrollo consistente.

Añade un archivo web_dev_config.yaml al directorio raíz de tu proyecto de Flutter. Si aún no has configurado un proyecto de Flutter, visita Construir una aplicación web con Flutter para comenzar.

Puedes definir el host, puerto y configuración de HTTPS para tu servidor de desarrollo.

server:
  host: "0.0.0.0" # Defines the binding address <string>
  port: 8080 # Specifies the port <int> for the development server
  https:
    cert-path: "/path/to/cert.pem" # Path <string> to your TLS certificate
    cert-key-path: "/path/to/key.pem" # Path <string> to TLS certificate key

También puedes inyectar cabeceras HTTP personalizadas en las respuestas del servidor de desarrollo.

server:
  headers:
    - name: "X-Custom-Header" # Name <string> of the HTTP header
      value: "MyValue" # Value <string> of the HTTP header
    - name: "Cache-Control"
      value: "no-cache, no-store, must-revalidate"

Las solicitudes se hacen coincidir en orden desde el archivo web_dev_config.yaml.

Usa el campo prefix para coincidencias de prefijo de ruta simples.

server:
  proxy:
    - target: "http://localhost:5000/" # Base URL <string> of your backend
      prefix: "/users/" # Path <string>
    - target: "http://localhost:3000/"
      prefix: "/data/"
      replace: "/report/" # Replacement <string> of path in redirected URL (optional)
    - target: "http://localhost:4000/"
      prefix: "/products/"
      replace: ""

Explanation:

• Una solicitud a /users/names se redirige a http://localhost:5000/users/names.
• Una solicitud a /data/2023/ se redirige a http://localhost:3000/report/2023 porque replace: “/report/” reemplaza el prefijo /data/.
• Una solicitud a /products/item/123 se redirige a http://localhost:4000/item/123 porque replace: "" elimina el prefijo /products/ reemplazándolo con una cadena vacía.

También puedes usar el campo regex para coincidencias más flexibles y complejas.

server:
  proxy:
    - target: "http://localhost:5000/"
      regex: "/users/(\d+)/$" # Path <string> matches requests like /users/123/
    - target: "http://localhost:4000/"
      regex: "^/api/(v\d+)/(.*)" # Matches requests like /api/v1/users
      replace: "/$2?apiVersion=$1" # Allows capture groups (optional)

Explanation:

• Una solicitud a /users/123/ coincide exactamente con la primera regla, por lo que se redirige a http://localhost:5000/users/123/.
• Una solicitud a /api/v1/users/profile/ comienza con la ruta de la segunda regla, por lo que se redirige a http://localhost:4000/users/profile/?apiVersion=v1.

Recuerda el orden de precedencia para los ajustes:

1. Argumentos de línea de comandos (como --web-hostname, --web-port)
2. web_dev_config.yaml settings
3. Built-in default values