Exercice – Créer des routes de repli

4 minutes

Il est maintenant temps de créer une route de repli pour permettre à vos utilisateurs d’accéder correctement à votre application.

Tirer (pull) le code le plus récent

Azure Static Web Apps a ajouté un fichier de workflow GitHub Actions dans la branche que vous avez sélectionnée dans l’exercice précédent. Tout d’abord, vous obtenez ce fichier en tirant (pull) votre code de Git.

Tirez (pull) les modifications de votre code de Git en procédant comme suit :

Ouvrez la solution ShoppingList dans Visual Studio.
Extrayez les dernières modifications de GitHub.

Vous pouvez maintenant voir votre fichier de workflow dans le dossier .github/workflows dans l’Explorateur Windows (le fichier ne fait pas partie de la solution Visual Studio).

Créer une règle de routage

Avant de publier votre application, vous créez des règles de routage incluant une route de repli.

Créer le fichier staticwebapp.config.json

Si vous n’avez pas encore de fichier staticwebapp.config.json dans votre projet, vous pouvez en créer un en suivant ces étapes :

Dans Visual Studio, cliquez avec le bouton droit sur le dossier wwwroot dans le projet Client.
Sélectionnez Ajouter -> Nouvel élément.
Sélectionnez Fichier JSON dans les modèles disponibles, nommez-le staticwebapp.config.json et appuyez sur Entrée.

Une fois le fichier staticwebapp.config.json créé, mettez-le à jour pour inclure la route de repli suivante :

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

Envoyer (push) vos modifications vers Git

À présent, enregistrez et commitez vos modifications dans votre dépôt Git local. Ensuite, poussez (push) ces modifications vers GitHub.

Essayer la route de repli

Le workflow GitHub Actions génère et déploie votre application.

Accédez à votre dépôt dans votre navigateur et observez la progression de l’action GitHub. Procédez comme suit pour visualiser cette progression :

Sélectionnez le menu Actions.
Dans le menu Workflows, sélectionnez l’élément de workflow Azure Static Web Apps CI/CD.
Sélectionnez le lien le plus récent (en haut) dans les exécutions d’actions à droite.
Sélectionnez le lien Build and Deploy Job.

Vous pouvez voir la progression de votre action GitHub à mesure qu’elle génère et publie votre application web et l’API.