.NET Core and Svelte with typescript including Docker build

Microsoft does not provide a ready to use SPA template for Svelte. There here an easy way to create this from scratch (to be continued)

First we need to initialize a svelte project converted to typescript and a ASP.net Core WebAPI project

npx degit sveltejs/template dotnet-svelte
cd dotnet-svelte
node scripts/setupTypeScript.js
dotnet new webapi

Now we adjust a few path to keep the project in line with the Microsoft standards

mv src svelte-app

mv public wwwroot

Now we need to adjust the rollup.config.js
In the serve section the server needs to be changed to dotnet

server = require('child_process').spawn('dotnet', ['watch', 'run'], {
	stdio: ['ignore', 'inherit', 'inherit'],
	shell: true
});

In the „export default“ section we need to ajust the path of the input as well as the output and the livereload path

input: 'svelte-app/main.ts',
output: {
	sourcemap: true,
	format: 'iife',
	name: 'app',
	file: 'wwwroot/build/bundle.js'
},

[...]

!production && livereload('wwwroot'),

To finialize we need to adjust the startup.cs file to serve the static content

// Add these in the configure method before app.UseRouting();
app.UseDefaultFiles();
app.UseStaticFiles();

The application should now be able to run

npm install
npm run dev

To build the project in Docker we use the following Dockerfile

FROM node:14 AS frontend
WORKDIR /build
COPY package.json .             
COPY package-lock.json .
RUN npm install
COPY rollup.config.js .
COPY svelte-app ./svelte-app
RUN npm run build

FROM mcr.microsoft.com/dotnet/sdk:5.0-alpine AS backend
WORKDIR /build
COPY dotnet-svelte.csproj .
RUN dotnet restore dotnet-svelte.csproj
COPY . .
RUN dotnet publish -c Release -o /publish

FROM mcr.microsoft.com/dotnet/aspnet:5.0-alpine
WORKDIR /app
COPY --from=frontend /build/wwwroot ./wwwroot
COPY --from=backend /publish .
ENTRYPOINT /app/dotnet-svelte

We can now build and run the project (https not used here)

docker build -t dotnet-svelte .
docker run --rm -p 5000:80 dotnet-svelte