This chapter walks through installing the tools Tauri needs, creating a first project and running it in development mode. It also covers editor setup and the CLI commands you will use most.
A Tauri app has two halves. The user interface is written in HTML, CSS and JavaScript and rendered by the WebView that ships with the operating system. Windowing, file access and system integration are handled by a core written in Rust. Your development machine therefore needs the Rust toolchain, the platform's WebView development libraries and, if you use a web frontend, Node.js.
Prerequisites
Start with the system dependencies for your platform.
On Debian and Ubuntu you can install everything in one go. For other distributions, check the package names on the official prerequisites page.
sudo apt update
sudo apt install libwebkit2gtk-4.1-dev \
build-essential curl wget file \
libxdo-dev libssl-dev \
libayatana-appindicator3-dev librsvg2-dev
Next, install Rust with rustup, the official installer. On Windows, download and run rustup-init.exe or use winget install --id Rustlang.Rustup, and keep the MSVC toolchain as the default.
# macOS and Linux
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# Verify the installation
rustc --version
cargo --version
If you build the UI with JavaScript or TypeScript, install an LTS release of Node.js as well. Android and iOS targets additionally need Android Studio with the NDK or a full Xcode installation, but you can skip those until you move beyond the desktop.
Creating a project
New projects are scaffolded with create-tauri-app.
npm create tauri-app@latest
The tool asks a few questions:
- Project name: used for the folder and as the default app name.
- Identifier: a unique reverse-domain name such as
com.example.myapp. - Frontend language: TypeScript/JavaScript, Rust or .NET.
- Package manager: npm, pnpm, yarn, bun and others.
- UI template: Vanilla, Vue, Svelte, React, Solid, Angular, Preact and more.
- UI flavor: TypeScript or JavaScript.
You can also add Tauri to an existing web project. Install the CLI as a dev dependency and run tauri init; it creates the src-tauri folder and asks for your dev server URL, the folder with your built assets and your build commands.
npm install -D @tauri-apps/cli@latest
npx tauri init
Running in development mode
Move into the project folder, install dependencies and start the app.
cd tauri-app
npm install
npm run tauri dev
tauri dev first runs the beforeDevCommand from the configuration (usually the Vite dev server), then compiles the Rust core and opens the app window. The first run builds every Rust dependency and can take a few minutes; after that only changed code is recompiled. Frontend edits are hot-reloaded in place, while Rust edits trigger a rebuild and an app restart.
In development builds you can open the WebView developer tools by right-clicking and choosing Inspect, or with Ctrl+Shift+I on Windows and Linux and Cmd+Option+I on macOS.
The template frontend calls a Rust function named greet like this. Chapter 3 explains the mechanism in detail.
import { invoke } from "@tauri-apps/api/core";
const input = document.querySelector<HTMLInputElement>("#greet-input")!;
const output = document.querySelector<HTMLParagraphElement>("#greet-msg")!;
document.querySelector("#greet-form")!.addEventListener("submit", async (event) => {
event.preventDefault();
output.textContent = await invoke<string>("greet", { name: input.value });
});
Editor setup
In VS Code, install the rust-analyzer and Tauri extensions. tauri.conf.json references a JSON schema, so configuration keys autocomplete as you type. Because the Rust code lives under src-tauri, rust-analyzer may not find it when you open the repository root; point it there in .vscode/settings.json.
{
"rust-analyzer.linkedProjects": ["src-tauri/Cargo.toml"]
}
Everyday CLI commands
When a build fails or no window appears, run tauri info first to check for missing system dependencies.
Summary
- Tauri development needs Rust, the platform WebView libraries and, for web frontends, Node.js.
- Create a project with
npm create tauri-app@latest and run it with npm run tauri dev. - The first build is slow; later builds only recompile what changed.
- Install rust-analyzer in your editor and reach for
tauri info when something looks wrong.
0 comments
Sign in · Sign in to leave a comment.