Ejercicio: Creación de las rutas de reserva

4 minutos

Ahora es el momento de crear una ruta de reserva para que los usuarios puedan navegar a la aplicación correctamente.

Extraer el código más reciente

Azure Static Web Apps ha agregado un archivo de flujo de trabajo de Acciones de GitHub a la rama que se seleccionó en el ejercicio anterior. Primero, obtendrá este archivo mediante la extracción del código de GIT.

Extraiga los cambios de código de GIT con estos pasos:

Abra la solución ShoppingList en Visual Studio.
Incorpore los últimos cambios de GitHub.

Ahora puede ver el archivo de flujo de trabajo en la carpeta .github/workflows en el Explorador de Windows (el archivo no forma parte de la solución de Visual Studio).

Crear una regla de enrutamiento

Antes de publicar la aplicación, cree reglas de enrutamiento que incluyan una ruta de reserva.

Creación del archivo staticwebapp.config.json

Si todavía no tiene un archivo staticwebapp.config.json en el proyecto, puede crear uno haciendo lo siguiente:

En Visual Studio, haga clic con el botón derecho en la carpeta wwwroot del proyecto Cliente.
Seleccione Agregar -> Nuevo elemento.
Seleccione Archivo JSON en las plantillas disponibles, asígnele el nombre staticwebapp.config.json y presione Entrar.

Una vez creado el archivo staticwebapp.config.json, actualícelo para incluir la ruta de reserva siguiente:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

Enviar los cambios a GIT

Ahora, guarde y confirme los cambios en el repositorio local de Git. Después, envíelos a GitHub.

Prueba de la ruta de reserva

El flujo de trabajo de Acciones de GitHub compila e implementa la aplicación.

Vaya al repositorio en el explorador y vea el progreso de la acción de GitHub. Para visualizar el progreso, siga estos pasos:

Seleccione el menú Acciones.
En el menú Flujos de trabajo, seleccione el elemento de flujo de trabajo Azure Static Web Apps CI/CD (CI/CD de Azure Static Web Apps).
Seleccione el vínculo más reciente (el superior) en la acción que se ejecuta a la derecha.
Seleccione el vínculo Build and Deploy Job (Compilar e implementar trabajo).

Puede ver el progreso de la acción de GitHub a medida que crea y publica la aplicación web y la API.