Tauri with Standard Svelte or SvelteKit

If you’re only interested in the how-to, skip the Introduction below.

Introduction

Tauri

Recently, I had the opportunity to experiment with Tauri, a new light-weight framework for developing cross-platform hybrid desktop applications. Tauri is written in Rust and boasts some exciting benefits over existing solutions such as Electron. A snapshot of some of these features includes the ability to seamlessly work with any front-end framework, a small bundle size, strong performance, as well as a security-first approach to application security. Unlike Electron, which uses the Chromium rendering engine, Tauri uses WRY, a cross-platform WebView written in Rust that uses the web engine for each target operating system. For example, WebView2 for Windows.

You can learn more about Tauri by visiting their main website or the GitHub repository. If you’re interested in Tauri’s architecture, checkout the Tauri architecture overview or the beta announcement.

What do I think of Tauri so far? Well, I’ve thoroughly enjoyed working with Tauri and I think it’s safe to say, Tauri will be my go-to framework for cross-platform hybrid desktop applications going forward. I can’t wait for Tauri to come out of beta!

Svelte

I chose to combine Tauri with the power of Svelte. Unlike frameworks such as React, Svelte is a compiler and not a framework. Svelte has been my go-to for developing web applications for over a year now. What do I think of Svelte? Well, the move from React to Svelte was like coming out of a long, dark tunnel. The things I love about Svelte include:

• That Svelte is a compiler and not a framework
• Svelte’s reactivity and state management model
• The developer experience
• The bundle size and performance of Svelte apps
• And more…

I’ve honestly not gone back to React since.

Svelte also recently claimed the mantle of “most loved framework” as per the Stack Overflow 2021 Developer Survey, and I would strongly recommend checking it out if you haven’t already. You can learn more about Svelte from their main website or GitHub repository.

Before You Start

For this guide, I’m not going to give you a GitHub repository to simply clone with everything setup for you, rather, I’m going to walk you through the steps of setting up Tauri with both standard Svelte, and SvelteKit manually.

I’m also going to use Yarn instead of NPM, as I prefer Yarn and Yarn is also preferred by the Tauri team. You can use either, though, and I will provide commands for both.

Development Environment

Before you can initialize your project, you’ll to need to set up your development environment. You will need to install both Rust (and Cargo) and Node.js, as well as Yarn if you choose to use it.

Depending on your operating system, you will also need to follow the steps listed on the main Tauri website to add the required dependencies. Linux, macOS and Windows.

Getting Started

Once you have your development environment setup, open a terminal to your preferred projects folder and initialize a new Svelte project.

Standard Svelte

Using the NPX package runner:

npx degit sveltejs/template project-name

SvelteKit

npm init svelte@next project-name

With SvelteKit, you will be prompted to select a template, which for this guide, I will use the Skeleton project. You will also be prompted with:

1. Enabling TypeScript support
2. Adding ESLint support
3. Enabling Prettier support

I will enable all three, but these choices are totally up to you.

Install Dependencies

Navigate into your project's root directory and install the project dependencies.

Yarn

yarn

NPM

npm install

Validate Svelte Setup

You can validate either Svelte setup from their respective project root directories by running the following command.

Standard Svelte

The following command will start a development server at http://localhost:5000, which you can open to validate the project setup. Port 5000 is the default port for a standard Svelte project.

Yarn

yarn dev

NPM

npm run dev

SvelteKit

The following command will start a development server at http://localhost:3000, which you can open to validate the project setup. Port 3000 is the default port for a SvelteKit project.

Yarn

yarn dev

NPM

npm run dev

Install Tauri

Navigate to your project root directory and run the following command. This command is the same for standard Svelte and SvelteKit.

Yarn

yarn add -D @tauri-apps/cli

NPM

npm install -D @tauri-apps/cli

If you’re using NPM, you will need to define the following custom script in your package.json file.

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

Initialize Tauri

The following command is the same for standard Svelte and SvelteKit.

Yarn

yarn tauri init

NPM

npm run tauri init

Proceed through the prompts defining the following:

1. App name (project-name)
2. Window title (project-name)
3. Web assets path (default)
4. Dev server URL (5000/3000)
5. Add @tauri-apps/api (yes)

A src-tauri folder will be added to the project root directory.

Note: You can change the default port at anytime by modifying the package.json file to include a --port flag.

Standard Svelte

"start": "sirv public --no-clear --port 8081"

SvelteKit

"dev": "svelte-kit dev --port 8082"

You also need to modify the following line in the tauri.conf.json file, found in the src-tauri directory. Replace 5000 with whatever port you wish to use. This step is the same for both standard Svelte and SvelteKit.

"devPath": "http://localhost:8081"

Validate Tauri Setup

The following command is the same for standard Svelte and SvelteKit.

Yarn

yarn tauri info

NPM

npm run tauri info

You should see something like:

Operating System - Ubuntu, version 20.04 X64
Node.js environment
  Node.js - 16.6.1
  @tauri-apps/cli - 1.0.0-beta.6
  @tauri-apps/api - 1.0.0-beta.5
Global packages
  npm - 7.20.3
  yarn - 1.22.10
Rust environment
  rustc - 1.54.0
  cargo - 1.54.0
App directory structure
/scripts
/node_modules
/src
/public
/src-tauri
App
  tauri.rs - 1.0.0-beta.5
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../public
  devPath - http://localhost:5000
  framework - Svelte
  bundler - Rollup

Launching the Tauri Development Window (TDW)

Once you’ve validated your Tauri setup, you’re almost ready to launch the TDW.

The first thing you need to do is update the beforeDevCommand and beforeBuildCommand in the tauri.conf.json file, found in the src-tauri directory. This step is the same for both standard Svelte and SvelteKit.

Yarn

"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn build"

NPM

"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build"

Note: The first time you launch the TDW, Cargo will need to download the required dependencies. This can take a minute or two and will be much faster on subsequent executions.

Standard Svelte

A standard Svelte application by default compiles to a Single Page Application (SPA), which means all you have to do is launch the TDW.

Yarn

yarn tauri dev

NPM

npm run tauri dev

Upon success, you should see:

Standard Svelte Hello World TDW

SvelteKit

SvelteKit requires a few more steps due to the fact that SvelteKit by default uses server-side rendering (SSR). The first step in disabling SSR is to add the @sveltejs/adapter-static dependency to the project. Adapter-static is a SvelteKit adapter, and you can learn more about adapters here.

Yarn

yarn add -D @sveltejs/adapter-static@next

NPM

npm i -D @sveltejs/adapter-static@next

Once you’ve added the adapter-static dependency, modify the svelte.config.js file in the project root directory to include the adapter-static dependency and set the ssr config option to false.

svelte.config.js

Note: If you did not select TypeScript support when adding Tauri to your project, you will not have the svelte-preprocess dependency in your project.

You can now start the TDW with the following command.

Yarn

yarn tauri dev

NPM

npm run tauri dev

Upon success, you should see:

SvelteKit Welcome Screen TDW

Observations

Closing TDW/Development Server

There is an issue when you close the TDW or use CTRL C from the terminal. Rollup continues to run the development server in the background, which results in the port being in use the next time you try to start the TDW. I asked about this in the official Tauri Discord, and the response I got was they are aware of it and there is nothing that can be done about it at this time. I’ve just been killing the process for the time being.

Conclusion

This will get you up and running with Tauri and Svelte. I will likely write a subsequent article on creating Rust commands that can be invoked from a Tauri application. For those who area eager to start today, checkout the official Tauri documentation.

I hope you found this article helpful.