.NET + Svelte + Vite

This template will boost your experience when developing apps with a .NET backend and Svelte + Vite frontend while still staying VERY lightweight and slim.

Versions & Dependencies

This template uses the latest top-tier technologies:

• .NET 10 for the backend
• Svelte 5 (^5.53.3)
• Vite 7 (^7.3.1)
• Svelte Vite Plugin 6 (^6.2.4)

If you prefer to use an older/different .NET version, change the line with the target framework moniker in svelte-dotnet-app-vite.csproj to your desired version (e.g., <TargetFramework>net8.0</TargetFramework>).

NPM Scripts

The project provides several helpful npm scripts to streamline your workflow. You can run them via npm run <script-name>:

• dev-frontend: Starts the Vite development server (usually on http://localhost:3000) with Hot Module Replacement (HMR) for the Svelte frontend.
• dev-backend: Starts the .NET backend using dotnet watch (running on http://localhost:5173). It automatically recompiles and restarts the backend when C# files are changed.
• build: Builds the frontend via Vite into the wwwroot directory and then builds the .NET backend. This prepares the app for production.
• preview: Locally previews the production build generated by Vite.

Development Workflow & Proxy Setup

During development, the frontend and backend run as separate processes on different ports:

• Frontend (Vite): Runs on http://localhost:3000
• Backend (.NET): Runs on http://localhost:5173

How to develop:

1. Start the backend: npm run dev-backend
2. Start the frontend: npm run dev-frontend (in a second terminal)
3. Open your browser and navigate to http://localhost:3000

You should interact with the application solely through the Vite frontend port (3000). This gives you the blazing-fast Hot Module Replacement (HMR) experience for your Svelte components.

How the Proxy works: Because the frontend and backend run on different ports, making direct API calls from the browser to the backend would normally trigger Cross-Origin Resource Sharing (CORS) errors.

To solve this, the Vite development server acts as a proxy. When your Svelte frontend makes an API call to an endpoint starting with /api (e.g., fetch('/api/users')), the browser sends this request to the Vite server (localhost:3000). Vite automatically intercepts the request and seamlessly forwards it to the .NET backend at http://localhost:5173/api/users.

This configuration (managed in vite.config.js) ensures your development environment closely mirrors production, where both the compiled frontend and the API are served together from the .NET backend on the same domain.

Recommended IDE Setup

VS Code + Svelte Extension/Language Service.