DEV Community

Cain Voong
Cain Voong

Posted on • Updated on

.NET Core and Svelte

In this post I will show you how to set up a .NET Core application with a Svelte frontend for development.

Svelte

You've probably heard of React, Vue and Angular by now. Svelte is an alternative to those with some important differences which make it stand out:

Traditional frameworks allow you to write declarative state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like virtual DOM diffing that eat into your frame budget and tax the garbage collector.

Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.

https://svelte.dev/blog/svelte-3-rethinking-reactivity#What_is_Svelte

Personally, I like Svelte because I just find it so easy - jQuery easy - to build applications with. If you already have a good grasp of JavaScript, HTML and CSS then there isn't much more to learn in order to get started.

Before you begin

Have the following installed:

At the time of writing, I'm running .NET Core 5.0.100 and Node.JS 14.15.1

Creating

npx degit sveltejs/template dotnet-svelte
Enter fullscreen mode Exit fullscreen mode

This creates a dotnet-svelte directory then places the Svelte starter template in there. Next thing to do is spin up a .NET Core Web Application within that folder:

cd dotnet-svelte
dotnet new web
Enter fullscreen mode Exit fullscreen mode

Configuration

Rename Directories

This makes things a bit more in line with .NET conventions.

# Rename 'src' to 'svelte-app'
mv src svelte-app

# Rename 'public' to 'wwwroot'
mv public wwwroot
Enter fullscreen mode Exit fullscreen mode

rollup.config.js:

The Svelte starter template uses sirv during development to serve static files. We can switch to using our .NET application by applying the modifications below.

In function serve():

server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev']
Enter fullscreen mode Exit fullscreen mode

To

server = require('child_process').spawn('dotnet', ['watch', 'run']
Enter fullscreen mode Exit fullscreen mode

In export default:

input: 'svelte-app/main.js', // <- we renamed src to svelte-app
output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'wwwroot/build/bundle.js' // <- renamed public to wwwroot
}
Enter fullscreen mode Exit fullscreen mode

A little further down, also update the directory livereload watches:

!production && livereload('wwwroot')
Enter fullscreen mode Exit fullscreen mode

Startup.cs

On the .NET side we can tell it to serve the static content which Svelte generates.

In the Configure method:

// Add these before app.UseRouting();
app.UseDefaultFiles();
app.UseStaticFiles();
Enter fullscreen mode Exit fullscreen mode

Running

Now we're ready!

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open your browser at http://localhost:5000 and you should be greeted with:

Hello World!

Development

If you modify any of the frontend files they'll get automatically rebuilt and refreshed in the browser. Backend changes are also automatically rebuilt but you'll have to manually refresh.

Summary

We took the Svelte starter template, tweaked it a little to fit with some .NET Core defaults then quickly set up a .NET Core service to serve the static files built by Svelte.

From here you can start building out your application.

At some point, you will need to deploy this somewhere which will require building both applications separately then combining the results. I'll cover that in a separate post.

Discussion (8)

Collapse
lizzard77 profile image
Phil R

Thanks and thanks again for this article. Helped me (and some others I know) a lot and quickly became a standard reference. I've created a repo that can be used as a template, following your instructions - feel free to use it as a starting point for your endeavors with .NET and Svelte: github.com/lizzard77/svelte-dotnet...

Collapse
cainux profile image
Cain Voong Author

Oh wow, thank you for taking the time to do this and share!

Collapse
rocugbg profile image
Bobby

Please make a follow up post about deployment and more about this combination of techniques.

Collapse
cainux profile image
Cain Voong Author

So far I’ve only done this by building a Docker image. Would you like me to detail that?

Collapse
dan1ve profile image
Daniel Veihelmann

That would be awesome! Thanks :)

Thread Thread
cainux profile image
Cain Voong Author • Edited on

Here you go: dev.to/cainux/net-core-svelte-and-... - hope you find it useful!

Thread Thread
dan1ve profile image
Daniel Veihelmann

Great, thanks man! :D

Collapse
shriji profile image
Shriji

Looking forward to future posts with integrations!