.Net / IIS – Svelte Project Template
by Guido Tapia
August 10, 2022
We recently published a simple, lightweight project template to help you start building a Svelte SPA (Single Page App) with a .Net backend, all hosted in IIS.
Github Link: https://github.com/gatapia/svelte_dotnet
Overview
This project will get you started with the following tech stack:
- Svelte
- SvelteKit: Mainly just for routing
- Carbon Design System: This can easily be replaced by your preferred UI framework
- .Net 6.0
- Hosted on IIS
- Requires the IIS URL Rewrite Module
SPA vs SSR
This template is for building single-page apps (SPAs). It disables SSR (server-side rendering) and other features offered by SvelteKit. So, if you need SSR, consider using SvelteKit as your server technology and not .Net.
Why .Net and not SvelteKit
Sometimes your customer chooses the stack. Sometimes you have to work with existing APIs. This project is another option for using Svelte with a .Net backend. If you don’t have these limitations, I recommend sticking to SvelteKit on the backend.
Technical Details
Web.release.config
This project includes a Web.release.config that adds some rewrite rules to allow proper server-side route handling. These rewrite rules are:
<rule name="sveltekit routes" stopProcessing="true">
<match url="^/(.+)/.*"/>
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^/.+/(api|_app)/" negate="true"/>
</conditions>
<action type="Rewrite" url="/{R:1}/" appendQueryString="true"/>
</rule>
These rewrite rules are only included in the release build of the project as local development using the SvelteKit dev server does not require it.
CORS for Development
When using the SvelteKit development server, you need to enable CORS. This change is done only in DEBUG mode and is safe in release mode.
ASP.Net Minimal API
The project uses the ASP.Net Minimal API to remove as much boilerplate as possible.
NUnit
The project uses NUnit for server-side unit tests, which can easily be swapped out with your preferred testing framework.
Release Scripts
The project includes two release scripts. These are release.bat and release_web.bat. These scripts help set up a release directory that can be deployed to IIS.
release.bat: This script builds the .Net backend in release mode. It also builds the Svelte frontend. The entire build is included in the .\release directory. The contents of this directory can then be deployed to IIS.
Note: It is possible to point IIS directly to the .\release directory, but this will lock the .Net files in this directory. So further release.bat runs will require killing the w3wp.exe process.
If you want to update the Svelte component in the .\release directory, run release_web.bat. This script does not require killing the IIS process.
svelte.config.js
The following changes were made to the svelte.config.js file:
Using the @sveltejs/adapter-static adapter, making the site a single-page application
In release mode, sets the paths.base directory to the virtual directory/application name in IIS. Note: This has to be hardcoded, so please change this to your directory name.
Carbon Design System
We currently use Carbon, SMUI and Tailwind for some of our projects. We chose to publish this template with Carbon as it’s probably the most “productive” framework, with many components that just “work”. However, it lacks some flexibility and customizability. This framework can easily be replaced with your preferred framework. Just use NPM and make the required changes in the svelte.config.js file.
Getting Started
See the Getting Started section in the readme.md to get started.
Disclaimer
This project is published to help you start quickly with Svelte and .Net. There is no commitment to keep this project updated with the latest libraries or to offer support. Please ask any .Net or Svelte-related questions in Stackoverflow.