Tauri

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.

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.

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.

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.

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.

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

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

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

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

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.

npm run tauri dev