Vite
This guide will walk you through creating your first Tauri app using the frontend build tool Vite.
Tauri is a framework to build desktop applications with any Front-end framework and a Rust core. Each app consists of two parts:
- Rust binary that creates the windows and exposes native functionality to those windows
- Frontend of your choice that produces the User Interface inside the window
In the following, we will first scaffold the Frontend, then set up the Rust project and lastly show you how to communicate between the two.
create-tauri-app
The easiest way to scaffold a new project is the create-tauri-app
utility. It will ask you a series of questions and quickly bootstrap a Tauri project for you to begin developing with. It has support for vanilla HTML/CSS/JavaScript but also many frontend frameworks like React, Vue, or Svelte.
- npm
- yarn
- pnpm
npm create tauri-app
yarn create tauri-app
pnpm create tauri-app
Here's a preview of what we will be building:
info
Before we continue, make sure you have completed the prerequisites and installed the Tauri CLI to have a working development environment.
Create the Frontend​
Vite is a frontend bundler and build tool meaning it provides various quality-of-life features such as Hot Module Reloading (HMR) during development, but it also converts your source code into optimized HTML, CSS and JavaScript when building for production. We recommend Vite for it's speed, easy configurability and large ecosystem of plugins.
Vite comes with a scaffolding utility similar to create-tauri-app
that can quickly setup a new project from a number of pre-defined templates. You can choose from many frontend frameworks like React, Svelte or Vue. For this guide we will select the vanilla-ts
template to create a simple project without any frontend framework.
- npm
- yarn
- pnpm
npm create vite@latest
yarn create vite
pnpm create vite
Project name:
This will be the name of your JavaScript project. Corresponds to the name of the folder this utility will create but has otherwise no effect on your app. You can use any name you want here.Select a framework:
If you plan on using a frontend framework later, this is where you can select it. For this guide, we assume you choosevanilla
.Select a variant:
Vite offers TypeScript and vanilla JavaScript variants for all templates, and you can select the variant here. We strongly recommend TypeScript as it helps you write more secure, maintainable code faster and more efficiently. For this guide, we assume you choosevanilla-ts
.
Before we move on, let's quickly customize our vite.config.ts
file, so you get the best compatibility with Tauri!
import { defineConfig } from 'vite'
export default defineConfig({
// prevent vite from obscuring rust errors
clearScreen: false,
// Tauri expects a fixed port, fail if that port is not available
server: {
port: 3000,
strictPort: true,
},
// to make use of `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
// `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE` and `TAURI_DEBUG`
// env variables
envPrefix: ['VITE_', 'TAURI_'],
build: {
// Tauri supports es2021
target: ['es2021', 'chrome97', 'safari13'],
// don't minify for debug builds
minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
// produce sourcemaps for debug builds
sourcemap: !!process.env.TAURI_DEBUG,
},
})
Create the Rust Project​
At the heart of every Tauri app is a Rust binary that manages windows, the webview and calls to the operating system through a Rust crate called tauri
. This project is managed by Cargo, the official package manager and general-purpose build tool for Rust. Our Tauri CLI uses Cargo under the hood so you rarely need to interact with it directly. Cargo has many more useful features that are not exposed through our CLI, such as testing, linting, and formatting, so please refer to their official docs for more.
To scaffold a minimal Rust project that is pre-configured to use Tauri, open a terminal and run the following command:
- npm
- yarn
- pnpm
- cargo
npm run tauri init
yarn tauri init
pnpm tauri init
cargo tauri init
It will walk you through a series of questions:
What is your app name?
This will be the name of your final bundle and what the OS will call your app. You can use any name you want here.What should the window title be?
This will be the title of the default main window. You can use any title you want here.Where are your web assets (HTML/CSS/JS) located relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created?
This is the path that Tauri will load your frontend assets from when building for production.To be compatible with Vite's default config we will answer this with '../dist'.
What is the URL of your dev server?
Because Vite's development server will listen on port 3000 by default we will answer this question with 'http://localhost:3000'.
This can be either a URL or a file path that Tauri will load during development.
info
If you're familiar with Rust, you will notice that tauri init
looks and works a lot like cargo init
. You can just use cargo init
and add the necessary Tauri dependencies if you prefer a fully manual setup.
The tauri init
command generates a folder called src-tauri
. It's a convention for Tauri apps to place all core-related files into this folder. Let's quickly run through the contents of this folder:
Cargo.toml
Cargo's manifest file. You can declare Rust crates your app depends on, metadata about your app, and much more. For the full reference see Cargo's Manifest Format.
tauri.conf.json
This file lets you configure and customize aspects of your Tauri application from the name of your app to the list of allowed APIs. See Tauri's API Configuration for the full list of supported options and in-depth explanations for each.
src/main.rs
This is the entrypoint to your Rust program and the place where we bootstrap into Tauri. You will find two sections in it:
src/main.rs#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}The line beginning with
cfg! macro
serves just one purpose: it disables the command prompt window that would normally pop up on Windows if you run a bundled app. If you're on Windows, try to comment it out and see what happens.The
main
function is the entry point and the first function that gets invoked when your program runs.icons
Chances are you want a snazzy icon for your app! To get you going quickly, we included a set of default icons. You should switch these out before publishing your application. Learn more about the various icon formats in Tauri's icons feature guide.
Now that we have scaffolded our Frontend and initialized the Rust project you're almost ready to run your App.
But before you do, let's quickly configure Tauri so it automatically start's the vite development server when you type tauri dev
and automatically runs the build script when you run tauri build
:
{
"build": {
// The Tauri CLI will execute this command when you run `tauri build`.
// This is the place to bundle your frontend and place html,css, and js files into the `distDir`.
"beforeBuildCommand": "npm run build",
// The Tauri CLI will execute this command when you run `tauri dev`.
// This should start your development server.
"beforeDevCommand": "npm run dev",
"devPath": "http://localhost:3000",
"distDir": "../dist"
},
And that's it! Now you can run the following command in your terminal to start a development build of your app:
- npm
- yarn
- pnpm
- cargo
npm run tauri dev
yarn tauri dev
pnpm tauri dev
cargo tauri dev
Invoke Commands​
Tauri lets you enhance your Frontend with native capabilities. We call these Commands, essentially Rust functions that you can call from your frontend JavaScript. This enables you to handle heavy processing or calls to the OS in much more performant Rust code.
Let's make a simple example:
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
A Command is just like any regular Rust function, with the addition of the #[tauri::command]
attribute macro that allows your function to communicate with the JavaScript context.
Lastly, we also need to tell Tauri about our newly created command so that it can route calls accordingly. This is done with the combination of the .invoke_handler()
function and the generate_handler![]
macro you can see below:
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
Now we're ready to call your Command from the JavaScript frontend!
To call our newly created command we will use the @tauri-apps/api
JavaScript library. It provides access to core functionality such as windows, the filesystem, and more through convenient JavaScript abstractions. You can install it using your favorite JavaScript package manager:
- npm
- yarn
- pnpm
npm install @tauri-apps/api
yarn add @tauri-apps/api
pnpm add @tauri-apps/api
With the library installed, you can modify your index.html
file to call the Command:
import { invoke } from '@tauri-apps/api'
// now we can call our Command!
// Right-click the application background and open the developer tools.
// You will see "Hello, World!" printed in the console!
invoke('greet', { name: 'World' })
// `invoke` returns a Promise
.then((response) => console.log(response))
tip
If you want to know more about the communication between Rust and JavaScript, please read the Tauri Inter-Process Communication guide.