Svelte .NET Template is a Boilerplate project template that scaffolds a full-stack web application by combining a SvelteKit client with an ASP.NET API server, built on Svelte 5 and .NET 9. This template, installable from NuGet via dotnet CLI, gives developers a working two-project setup out of the box.
What is the Svelte .NET Template?
The Svelte .NET Template is a dotnet new project template that creates two projects: a Client built with SvelteKit for frontend routing and a Server exposing an ASP.NET API. It uses Svelte 5 and .NET 9, making it suitable for developers who want a current full-stack .NET and JavaScript setup. The template is distributed as a NuGet package and can be installed with dotnet new install Svelte.Dotnet.Template.
Key Features
- Dual project structure — The template includes a SvelteKit Client project and an ASP.NET API Server project, keeping the frontend and backend codebases separate.
- Svelte 5 and .NET 9 — The frontend uses Svelte 5 with SvelteKit, and the backend runs on .NET 9, giving access to the latest language and framework features.
- Swagger TypeScript code generation — Running
npm run generate-api-classesin the Client regenerates TypeScript code for interacting with the Web API, based on the Swagger definition. - Simple installation — Install the template once with
dotnet new install Svelte.Dotnet.Template, then use it to create new projects; the package is available on NuGet. - Standard Node.js workflow — The Client requires NodeJS 18 or later and NPM, and includes npm scripts for dev (
npm run dev), build (npm run build), and preview (npm run preview). - Recommended editor pairing — The template suggests using VS Code for the Client and Visual Studio for the Server, though you are free to use any tools.
Who is the Svelte .NET Template for?
- Full-stack .NET developers who want a predefined SvelteKit and ASP.NET integration can scaffold a new project with the template without wiring the two frameworks together manually.
- Teams using Svelte 5 paired with a .NET backend can benefit from the separate client and server projects and the included TypeScript generation from Swagger.
- Developers who like to split tooling — the template's recommendation of VS Code for the frontend and Visual Studio for the backend fits teams that prefer different editors for different parts of the stack.
What can you do with the Svelte .NET Template?
- Scaffold a new full-stack app —
dotnet new install Svelte.Dotnet.Templatemakes the template available in the dotnet CLI, so you can create a new project with a working SvelteKit and ASP.NET structure. - Develop with hot reload — In the Client,
npm run devstarts a local SvelteKit development server; the ASP.NET API runs separately as a typical .NET project. - Keep API clients in sync — After changing the API, run
npm run generate-api-classesto regenerate TypeScript classes from the Swagger endpoint, reducing manual API client maintenance. - Build for production — Use
npm run buildin the Client to create a production version of the Svelte app; you may need to install a SvelteKit adapter for your specific hosting environment.
How does the Svelte .NET Template work?
After installation, the template generates a solution with two projects: the Client is a SvelteKit application that runs under Node.js, and the Server is an ASP.NET API. To start developing, run dotnet new to create a project from the template, then npm install in the Client folder. The Client uses npm scripts for development, building, and generating TypeScript code from the Swagger definition of the Server API.
FAQ
How do I install the Svelte .NET Template?
Run the command dotnet new install Svelte.Dotnet.Template in your terminal. This pulls the template package from NuGet and registers it with the dotnet CLI, after which you can use it with dotnet new.
What versions of Node.js and .NET are required?
The Client project requires NodeJS version 18 or later and NPM. The Server project targets .NET 9. The template itself runs on the platform where you run the dotnet CLI.
Can I deploy the client to any hosting platform?
The documentation notes that you may need to install a SvelteKit adapter for your target environment. The standard build command, npm run build, produces a production build that you can preview with npm run preview.
Does the template generate TypeScript code from the API?
Yes, the Client includes a script named generate-api-classes that runs npm run generate-api-classes. This script regenerates TypeScript code for interacting with the Web API using the Swagger definition, so your frontend stays in sync with backend changes.
