Full Stack Launch with VS Code (C# + SvelteKit)

This repository demonstrates how to configure VS Code to launch a full stack project using a backend in C# and a frontend in SvelteKit.

Features

• Builds the C# project automatically
• Starts the frontend (SvelteKit) after backend is ready
• Automatically opens the browser pointing to the frontend
• Terminates the frontend task after debugging

Environment

✅ Tested on Linux (Ubuntu 22.04+). It may require adjustments for Windows or macOS.

How it works

1. A shell script is used to:

   • Clean the backend build folder
   • Build the C# project
   • Launch the frontend in the background

2. A task (build-and-start) is defined to run the shell script.

3. The launch.json uses this task in preLaunchTask and defines serverReadyAction to open the browser when the backend is ready.

Scripts

build-and-start.sh

#!/bin/bash

# Detects bash or zsh and loads the user environment
[ -f ~/.nvm/nvm.sh ] && source ~/.nvm/nvm.sh
[ -f ~/.bashrc ] && source ~/.bashrc
[ -f ~/.zshrc ] && source ~/.zshrc


set -e

echo "🧹 Cleaning up old build..."
rm -rf Server/bin

# Build the C# project
echo "🔧 Building C# project..."

if ! dotnet build Server/Server.csproj; then
    echo "❌ Failed to build C# project."
    exit 1
fi


# Start the frontend (SvelteKit) in the background
echo "🚀 Starting frontend (SvelteKit)..."
cd Client
npm run dev

VS Code Configuration

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build-and-start",
      "type": "shell",
      "command": "${workspaceFolder}/build-and-start.sh",
      "isBackground": true,

      
      "problemMatcher": [        
        {
          "base": "$msCompile",
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".*Starting frontend.*",
            "endsPattern": ".*http://localhost.*"
          }
        }
      ],
    },
    {
      "label": "terminate-all-tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Full Stack Launch",
      "type": "coreclr",
      "request": "launch",
      "program": "${workspaceFolder}/Server/bin/Debug/net8.0/Server.dll",
      "cwd": "${workspaceFolder}/Server",      
      "preLaunchTask": "build-and-start",
      "postDebugTask": "terminate-all-tasks",
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
       // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
      "serverReadyAction": {
          "action": "openExternally",
          "pattern": "\\bNow listening on:\\s+https?://\\S",
          "uriFormat": "http://localhost:5173",
          
      },
    }
  ]
}

License

MIT