Technologie

Wie erstellt man eine Blazor-App in Visual Studio Code?

Melden
  1. Vorbereitung der Entwicklungsumgebung
  2. Erstellen eines neuen Blazor-Projekts
  3. Projekt in Visual Studio Code öffnen und konfigurieren
  4. Die Anwendung starten und im Browser testen
  5. Zusammenfassung

Die Erstellung einer Blazor-App in Visual Studio Code ist ein spannender Weg, Webanwendungen mit .NET und C# zu entwickeln. Blazor ermöglicht es, interaktive Weboberflächen mit nativer .NET-Technologie zu bauen, ohne auf JavaScript angewiesen zu sein. Im Folgenden wird ausführlich beschrieben, wie man Schritt für Schritt eine Blazor-App in Visual Studio Code einrichtet und startet.

Vorbereitung der Entwicklungsumgebung

Bevor Sie eine Blazor-App in Visual Studio Code erstellen können, müssen Sie sicherstellen, dass Ihre Entwicklungsumgebung richtig eingerichtet ist. Dazu benötigen Sie zunächst das .NET SDK, das die notwendigen Werkzeuge enthält, um .NET-Anwendungen zu entwickeln und auszuführen. Besuchen Sie die offizielle Website von Microsoft, um das neueste .NET SDK herunterzuladen und zu installieren. Nach der Installation können Sie in einem Terminal mit dem Befehl dotnet --version überprüfen, ob die Installation erfolgreich war und welche Version installiert wurde. Weiterhin ist es sinnvoll, in Visual Studio Code einige Erweiterungen zu installieren, die die Arbeit mit C# und Blazor erleichtern. Die C#-Erweiterung von Microsoft bietet zum Beispiel Syntax-Highlighting, Debugging und IntelliSense-Unterstützung.

Erstellen eines neuen Blazor-Projekts

Nachdem die Vorbereitungen abgeschlossen sind, öffnen Sie Visual Studio Code und öffnen ein neues Terminalfenster. Mit dem .NET SDK können Sie nun ein neues Blazor-Projekt erzeugen. Blazor bietet zwei Haupttypen: Blazor Server und Blazor WebAssembly. Für den Anfang kann Blazor WebAssembly interessant sein, da die Anwendung clientseitig im Browser läuft. Um ein neues Blazor-WebAssembly-Projekt zu erstellen, geben Sie den Befehl dotnet new blazorwasm -o MeinBlazorProjekt ein. Hierbei steht MeinBlazorProjekt für den Ordner, in dem Ihr neues Projekt erstellt wird. Dieser Befehl legt alle notwendigen Dateien und Ordnerstruktur an, die eine Blazor-App benötigt.

Projekt in Visual Studio Code öffnen und konfigurieren

Wechseln Sie anschließend in den neu erstellten Projektordner mit cd MeinBlazorProjekt und öffnen Sie diesen Ordner in Visual Studio Code. Wenn Sie die C#-Erweiterung installiert haben, wird Visual Studio Code Sie möglicherweise auffordern, zusätzliche Abhängigkeiten oder einen empfohlenen Workspace zu laden – dies sollten Sie bestätigen. Dadurch erhalten Sie eine optimale Entwicklungsumgebung mit IntelliSense und Debugging-Unterstützung. Es ist ebenfalls ratsam, die Datei launch.json und tasks.json in einem versteckten Ordner .vscode anzupassen oder anzulegen, um das Starten und Debuggen der Blazor-Anwendung komfortabel zu ermöglichen.

Die Anwendung starten und im Browser testen

Um die Blazor-App zu starten, geben Sie im Terminal den Befehl dotnet run ein. Der Entwicklungsserver wird gestartet und gibt Ihnen eine URL aus, meist https://localhost:5001 oder http://localhost:5000. Öffnen Sie diese Adresse in einem Webbrowser. Dort sollte Ihre neue Blazor-WebAssembly-App angezeigt werden. Visual Studio Code selbst bietet ebenfalls Debugging-Fähigkeiten für Blazor-Projekte, sodass Sie Haltepunkte setzen und den Programmablauf überwachen können.

Zusammenfassung

Das Erstellen einer Blazor-App in Visual Studio Code erfordert zunächst die Installation des .NET SDK sowie sinnvoller Erweiterungen in Visual Studio Code. Mit dem Kommandozeilenbefehl lässt sich eine neue Blazor-WebAssembly-App erzeugen, die dann im Editor geöffnet, angepasst und schließlich über den integrierten Entwicklungsserver gestartet wird. So können Sie moderne webbasierte Anwendungen mit C# und Razor-Komponenten entwickeln, ohne auf klassische JavaScript-Frameworks angewiesen zu sein.

0