A guide to building a cross-platform desktop application using Svelte, Skeleton, Tauri, and Rust

This is the follow-up to my previous post here.

Let us build a static website. This is similar to numerous other static website builder applications but the target is not hosting online but embedding into a Rust binary. A sample use-case for this is beautiful documentation for a command line application.

Tauri has a starter guide for SvelteKit configuration. But here we shall use a Svelte UI Component framework. Even though it is simple to develop our own Svelte components, as I am not an expert in Svelte yet,  relying on a framework(for now) will boost productivity. After a bit of research, I decided to try Skeleton a relatively new Component library designed specifically for SvelteKit applications. So let us not follow the Tauri guide. Instead, we go with the Skeleton starting guide and adapt the generated application for Tauri.

Create a Skeleton template application

Following https://www.skeleton.dev/docs/get-started

Tauri Svelte configuration

Following https://tauri.app/v1/guides/getting-started/setup/sveltekit

Make the Svelte static site generation configuration changes.

tauri % yarn add -D @sveltejs/adapter-static@latest

tauri % yarn add -D @tauri-apps/cli

tauri % yarn tauri init

tauri % yarn tauri dev

We need to add the vite configuration for Tauri. This configuration is created when we follow the Tauri SvelteKit guide . I will show it below for reference vite.config.ts.

yarn add -D @types/node

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

const mobile =
	process.env.TAURI_PLATFORM === "android" ||
	process.env.TAURI_PLATFORM === "ios";

// https://vitejs.dev/config/
export default defineConfig(async () => ({
	plugins: [sveltekit()],

	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
	// prevent vite from obscuring rust errors
	clearScreen: false,
	// tauri expects a fixed port, fail if that port is not available
	server: {
		port: 5173,
		strictPort: true,
	},
	// to make use of `TAURI_DEBUG` and other env variables
	// https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
	envPrefix: ["VITE_", "TAURI_"],
	build: {
		// Tauri supports es2021
		target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
		// don't minify for debug builds
		minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
		// produce sourcemaps for debug builds
		sourcemap: !!process.env.TAURI_DEBUG,
	},
}));

Markdown authoring using Mdsvex

It's always nice to be able to write content in Markdown for static sites. The markdown ecosystem is huge with a lot of tooling and plugins. Docusaurus has nice MDX integration. But as we are using Svelte, we need something like MDX for Svelte. Hence https://mdsvex.com/docs

tauri % yarn add -D mdsvex
tauri % yarn add highlight.js

Update Svelte configuration to use 'mdsvex' as a preprocessor.

Voila! We have our Markdown with Svelte components

I will keep updating this article further as I keep going on building the complete UI, But for now, I hope you enjoyed it.

Thanks,
Harsha Teja Kanna