Übung: Erste Schritte

  • 3 Minuten

Azure Static Web Apps veröffentlicht Websites in einer Produktionsumgebung durch Erstellen von Apps aus einem GitHub-Repository. In dieser Übung erstellen Sie eine Webanwendung mit Blazor aus einem GitHub-Repository.

Erstellen eines Repositorys

Dieses Modul erleichtert Ihnen das Erstellen eines neuen Repositorys mithilfe eines GitHub-Vorlagenrepositorys. Es ist eine Vorlage verfügbar, die eine mit Blazor entwickelte Starter-App enthält.

  1. Wechseln Sie zur Seite Aus Vorlage erstellen für das Vorlagenrepository.

    • Wenn Sie die Fehlermeldung „404: Seite nicht gefunden“ erhalten, melden Sie sich bei GitHub an, und versuchen Sie es noch einmal.

  2. Wenn Sie aufgefordert werden, einen Besitzer anzugeben, wählen Sie eines ihrer GitHub-Konten aus.

  3. Geben Sie Ihrem Repository den Namen my-static-blazor-app.

  4. Azure Static Web Apps unterstützt sowohl öffentliche als auch private Repositorys. Wählen Sie für diese Übung Private (Privat) als Sichtbarkeit aus.

  5. Klicken Sie auf Create repository (Repository erstellen).

Ausführen der App

Sie haben soeben ein GitHub-Repository mit dem Namen my-static-blazor-app in Ihrem GitHub-Konto erstellt. Als nächstes klonen Sie das Repository und führen den Code lokal auf Ihrem Computer aus.

  1. Wählen Sie in Ihrem GitHub-Repository zuerst Code und dann im Menü Mit Visual Studio öffnen aus. Durch diesen Befehl werden Sie aufgefordert, Visual Studio zu starten und das Repository auf Ihren Rechner zu klonen.

    • Wenn Sie mehrere Versionen von Visual Studio installiert haben, stellen Sie sicher, dass Ihre App in Visual Studio 2022 oder höher geöffnet ist.

  2. Öffnen Sie die Projektmappendatei ShoppingList.sln.

    Screenshot showing where to open the shopping list solution.

  3. Führen Sie schließlich die Front-End-Clientanwendung aus, indem Sie Client als Startprojekt auswählen und den Debugger starten.

    Screenshot showing the client project selected.

Navigieren zu Ihrer App

Schauen Sie sich nun an, wie die Anwendung lokal ausgeführt wird. Visual Studio öffnet die Website in Ihrem Standardbrowser.

Screenshot showing the UI of your web app.

Ihre App sollte die Meldung Daten werden geladen anzeigen, da noch keine Daten und keine API vorhanden sind. Sie fügen die API für Ihre Web-App später in diesem Modul hinzu.

Beenden Sie nun Ihre laufende App, indem Sie die Debugsitzung in Visual Studio beenden.

Nächste Schritte

Sie haben Ihre Anwendung erstellt, und sie wird nun lokal in Ihrem Browser ausgeführt.

Als nächstes veröffentlichen Sie Ihre Anwendung in Azure Static Web Apps.