Tauri

The following guide will cover the basics for generating a new Tauri app using both SvelteKit and Skeleton.


Tauri is a toolkit that helps developers make applications for the major desktop platforms - using virtually any frontend framework in existence. The core is built with Rust, and the CLI leverages Node.js making Tauri a genuinely polyglot approach to creating and maintaining great apps.

Prerequisites

Before you begin, make sure to install all required Rust language and system dependencies per the guide below.

Video Guide

Optional

For visual learners, the following video will guide you through the process of integrating Tauri and SvelteKit. You can then follow these instructions to manually add Skeleton to your project.

Manual Guide

Setup Skeleton

To begin, we'll use the Skeleton CLI to scaffold a new project. This will automatically install SvelteKit, Tailwind, and Skeleton. If you're using an existing SvelteKit project, please refer to our manual install instructions.

terminal
npm create skeleton-app@latest skeleton-tauri-app
	- Enable Typescript when prompted (recommended)
cd skeleton-tauri-app
npm install

Prepare Your App

Since Tauri will use Rust as the backend, we'll adjust SvelteKit to use static site generation (SSG). This makes use of SvelteKit's adapter-static.

terminal
npm install --save-dev @sveltejs/adapter-static

Locate svelte.config.[ts|js] in the root of your project, then switch from adapter-auto to adapter-static.

javascript
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [vitePreprocess({})],

	kit: {
		adapter: adapter()
	}
};

export default config;

Open your root layout, found in /src/routes/+layout.[ts|js], then append the following two lines at the top of the script tag. This disables server-side rendering (SSR) while enabling prerendering.

javascript
export const ssr = false;
export const prerender = true;

Install Tauri

Tauri offers a friendly CLI to easily automate the install process. Run the following command in your terminal.

terminal
npm install --save-dev @tauri-apps/cli

Locate package.json in the root of your project, open this and append the following script command.

json
"scripts": {
	"tauri": "tauri"
}

Run the following command in your terminal. Please take care to use the recommendations settings provided below.

terminal
npm run tauri init
1
What is your app name?
Set the desired name of the generated bundle
2
What should the window title be?
Set the desired title of the main window
3
Where are your web assets (HTML/CSS/JS) relative to /src-tauri/tauri.conf.json?
Set the default to ../build
4
What is the URL of your dev server?
SvelteKit's default is http://localhost:5173
5
What is your frontend dev command?
If using NPM, set this to npm run dev
6
What is your frontend build command?
If using NPM, set this to npm run build

Verify Install

Once installed, look for /src-tauri in the root of your project. This houses the following critical Tauri assets:

  • Cargo.toml - similar to package.json, but for Rust.
  • tauri.conf.json - the Tauri configuration file.
  • src/main.rs - the entry point of your Rust backend.

Run the App

Use the following command to start your Tauri application.

terminal
npm run tauri dev

Starter Template

If you're looking for a quick start or reference project, please refer to our opinionated template on GitHub.


Learn More