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:
- Enabling TypeScript support
- Adding ESLint support
- 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:
- App name (project-name)
- Window title (project-name)
- Web assets path (default)
- Dev server URL (5000/3000)
- 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 X64Node.js environment
Node.js - 16.6.1
@tauri-apps/cli - 1.0.0-beta.6
@tauri-apps/api - 1.0.0-beta.5Global packages
npm - 7.20.3
yarn - 1.22.10Rust environment
rustc - 1.54.0
cargo - 1.54.0App directory structure
/scripts
/node_modules
/src
/public
/src-tauriApp
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:
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.
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:
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.