Wenn VS Code deine Blazor-Anwendung nicht korrekt startet

Die Problematik

Wenn du ein Blazor Web App Projekt von Visual Studio 2022 in VS Code öffnest und versuchst zu starten, kann es sein, dass statt der erwarteten Seite auf https://localhost:7001 nur ein leerer Browser-Tab mit about:blank geöffnet wird. Dies ist ein häufiges Problem bei der Migration zwischen den verschiedenen Entwicklungsumgebungen.

Obwohl alle Konfigurationen in der launchSettings.json korrekt sind und das Projekt problemlos in Visual Studio 2022 läuft, fehlen in VS Code die notwendigen Debug-Einstellungen, um den Browser korrekt mit der richtigen URL zu öffnen.

Die Lösung

Um das Problem zu beheben, musst du eine launch.json-Datei im .vscode-Verzeichnis deines Projekts anlegen. Diese Datei teilt VS Code mit, wie deine Anwendung gestartet und debuggt werden soll.

Folgende Schritte sind notwendig:

1. Öffne dein Projekt in VS Code
2. Erstelle eine .vscode-Verzeichnis im Root deines Projekts (falls nicht bereits vorhanden)
3. Erstelle eine launch.json-Datei mit folgender Konfiguration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch and Debug Blazor Web App",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/ProjectName/ProjectName/bin/Debug/net9.0/ProjectName.dll",
            "args": [],
            "cwd": "${workspaceFolder}/ProjectName/ProjectName",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
                "uriFormat": "%s"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            },
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start \"\" \"${auto-detect-url}\""
                }
            }
        },
        {
            "name": "Launch with HTTPS",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/ProjectName/ProjectName/bin/Debug/net9.0/ProjectName.dll",
            "args": [],
            "cwd": "${workspaceFolder}/ProjectName/ProjectName",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
                "uriFormat": "%s"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_URLS": "https://localhost:7001;http://localhost:5260"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        }
    ]
}

Wichtig ist, dass die Pfade zum Programm und die Arbeitsverzeichnisse (cwd) auf dein konkretes Projekt angepasst sind. Bei der zweiten Konfiguration "Launch with HTTPS" wird explizit die URL https://localhost:7001 festgelegt, die in der launchSettings.json definiert ist.

1. Stelle sicher, dass eine entsprechende tasks.json-Datei im selben .vscode-Verzeichnis vorhanden ist:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/ProjectName/ProjectName/ProjectName.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

Nach dem Speichern dieser Dateien kannst du nun dein Projekt starten, indem du F5 drückst oder im Run and Debug-Panel von VS Code die Konfiguration "Launch with HTTPS" auswählst. Der Browser sollte sich nun mit der korrekten URL öffnen.

GitHub Copilot im Agent Mode nutzen

Eine einfache Methode, um diese Änderungen vorzunehmen, ist die Verwendung von GitHub Copilot im Agent Mode. So kannst du das Problem schnell und effizient lösen:

1. Öffne GitHub Copilot (Agent Mode) in VS Code
2. Beschreibe das Problem konkret und präzise, zum Beispiel:

Die Anwendung startet in VS Code nicht korrekt: der Browser öffnet about:blank anstatt https://localhost:7001

Das Projekt und auch launchSettings.json sind korrekt, denn unter Visual Studio 2022 startet das Projekt korrekt. Füge unter .vscode launch.json hinzu

1. GitHub Copilot analysiert daraufhin dein Projekt und erstellt automatisch die notwendige launch.json-Datei mit den korrekten Einstellungen für deine spezifische Projektstruktur.
2. Nach der Erstellung der Dateien kannst du das Projekt starten und es sollte nun korrekt funktionieren.

Der Vorteil der Verwendung von GitHub Copilot im Agent Mode ist, dass er automatisch die richtige Projektstruktur erkennt, die entsprechenden Pfade anpasst und sicherstellt, dass die Konfiguration mit den vorhandenen Dateien wie launchSettings.json übereinstimmt.

Fazit

Der Wechsel zwischen verschiedenen Entwicklungsumgebungen kann manchmal zu unerwarteten Problemen führen. In diesem Fall ist die Lösung recht einfach - VS Code benötigt nur eine zusätzliche Konfigurationsdatei, um zu wissen, wie das Projekt gestartet werden soll. Mit der richtigen launch.json lassen sich Blazor Web Apps genauso gut in VS Code entwickeln wie in Visual Studio 2022. Die Entwicklung unter VS Code ist aktuell sogar wesentlich komfortabler, da hier im Gegensatz zu Visual Studio 2022 der Agent Mode bereits zur Verfügung steht und dir mit KI-Unterstützung unter die Arme greift 😉