Övning – Skapa reservvägar

4 minuter

Nu är det dags att skapa en reservväg så att användarna kan navigera till din app.

Hämta din senaste kod

Azure Static Web Apps lade till en GitHub Actions-arbetsflödesfil i den gren du valde i föregående övning. Först får du den här filen genom att hämta koden från Git.

Hämta dina kodändringar från Git på följande sätt:

Öppna lösningen ShoppingList i Visual Studio.
Hämta de senaste ändringarna från GitHub.

Nu kan du se arbetsflödesfilen i mappen .github/workflows i Utforskaren (filen är inte en del av Visual Studio-lösningen).

Skapa en hanteringsregel

Innan du publicerar din app skapar du routningsregler som innehåller en återställningsväg.

Skapa filen staticwebapp.config.json

Om du inte redan har en staticwebapp.config.json-fil i projektet kan du skapa en genom att följa dessa steg:

I Visual Studio högerklickar du på mappen wwwroot i Client-projektet.
Välj Lägg till –> nytt objekt.
Välj JSON-fil från de tillgängliga mallarna, ge den namnet staticwebapp.config.json och tryck på Retur.

När staticwebapp.config.json har skapats uppdaterar du den så att den innehåller följande återställningsväg:

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

Pusha ändringarna till Git

Spara och checka in ändringarna till din lokala Git-lagringsplats. Push-överför sedan ändringarna till GitHub.

Testa reservvägen

GitHub Actions-arbetsflödet skapar och distribuerar din app.

Gå till din lagringsplats i webbläsaren och se förloppet för GitHub-åtgärden. Så här visar du förloppet:

Välj menyn Åtgärder.
Under menyn Arbetsflöden väljer du objektet Azure Static Web Apps CI/CD-arbetsflöde .
Välj den senaste länken (överst) i åtgärden körs till höger.
Välj länken Skapa och distribuera jobb.

Du kan titta på medan GitHub-åtgärden bygger och publicerar din webbapp och ditt API.

När appen har distribuerats om bläddrar du till den. Observera att det står /products i URL:en. Uppdatera nu webbläsaren genom att trycka på F5 för att testa återställningsvägen. Nu ska din app läsas in korrekt tack vare reservvägen i dina routningsregler!

Fortsätt