Compartir a través de

Inicio del emulador de la CLI de Static Web Apps

  • Artículo

Importante

Para mejorar la seguridad de las implementaciones de la CLI de Static Web Apps, se introdujo un cambio importante que requiere que actualice a la versión más reciente (2.0.2) de la CLI de Static Web Apps antes del 15 de enero de 2025.

Static Web Apps es una plataforma basada en la nube que hospeda y ejecuta las aplicaciones web. Al ejecutar la aplicación localmente, necesita herramientas especiales para ayudarle a aproximarse a la manera en que la aplicación se ejecutaría en la nube.

La CLI de Static Web Apps (CLI de SWA) incluye un emulador que imita cómo se ejecutaría la aplicación en Azure, pero la ejecuta exclusivamente en la máquina.

El comando swa start inicia el emulador con la configuración predeterminada. De forma predeterminada, el emulador usa el puerto 4280.

Para obtener más información sobre los comandos individuales, consulte la referencia de la CLI.

Servicio de archivos estáticos desde el sistema de archivos

La CLI de SWA le permite servir directamente el contenido estático desde el sistema de archivos sin que sean necesarias otras herramientas. Puede servir el contenido estático desde el directorio actual o una carpeta específica.

Servir desde... Get-Help Notas
Carpeta actual swa start De forma predeterminada, la CLI inicia y sirve contenido estático (HTML, imagen, script y archivos CSS) desde el directorio de trabajo actual.
Carpeta específica swa start ./my-dist Puede invalidar el comportamiento para iniciar el emulador con una carpeta de recursos estáticos diferente.

Uso del servidor de desarrollo

A medida que desarrolle el front-end de la aplicación, es posible que quiera usar el servidor de desarrollo predeterminado del marco. El uso del servidor de un marco le permite aprovechar ventajas como la recarga en vivo y el reemplazo de módulos activos (HMR).

Por ejemplo, los desarrolladores de Angular suelen usar ng serve o npm start para ejecutar el servidor de desarrollo.

Puede configurar la CLI de SWA de Static Web Apps en solicitudes de proxy al servidor de desarrollo, lo que proporciona las ventajas de la CLI de ambos marcos mientras trabaja simultáneamente con la CLI de Static Web Apps.

Hay que seguir dos pasos para usar el servidor de desarrollo de un marco junto con la CLI de SWA:

  1. Inicie el servidor de desarrollo local del marco como de costumbre. Asegúrese de anotar la dirección URL (incluido el puerto) que usa el marco de trabajo.

  2. Inicie la CLI de SWA en un nuevo terminal y pase la dirección URL del servidor de desarrollo.

    swa start <DEV_SERVER_URL>

Nota:

Asegúrese de reemplazar el marcador de posición <DEV_SERVER_URL> por su propio valor.

Inicio del servidor de desarrollo

Puede simplificar aún más el flujo de trabajo si la CLI de SWA inicia el servidor de desarrollo automáticamente.

Puede pasar un comando personalizado en el parámetro --run al comando swa start.

swa start <DEV_SERVER_URL> --run <DEV_SERVER_LAUNCH_COMMAND>

Estos son algunos ejemplos de inicio del emulador con algunos marcos diferentes:

marco Comando
React swa start http://localhost:3000 --run "npm start"
Blazor swa start http://localhost:5000 --run "dotnet watch run"
Jekyll. swa start http://localhost:4000 --run "jekyll serve"

También puede usar el parámetro --run si desea ejecutar un script personalizado al iniciar el servidor de desarrollo.

swa start http://localhost:4200 --run "./startup.sh"

Con el comando anterior, puede acceder a la aplicación con los servicios emulados desde http://localhost:4280

Pasos siguientes

Iniciar el servidor de API