Hello Tauri: Your First Application

Now that our environment is set up, it’s time to build something. We won’t be manually creating files; instead, we will use the official scaffolding utility to generate a project structure following best practices.

Scaffolding the Project

Open your terminal to the folder where you keep your projects and run the create-tauri-app command. This utility works with npm, yarn, pnpm, and cargo.

# using npm
npm create tauri-app@latest

# using cargo
cargo create-tauri-app

The utility will guide you through a series of interactive prompts:

Project name: Choose a name for your app (e.g., my-tauri-app).
Identifier: A unique bundle ID (e.g., com.my-tauri-app.dev).
Frontend flavor: Choose your preferred web framework (Vanilla, React, Vue, Svelte, etc.).
TypeScript / JavaScript: Select your language preference.

Dissecting the Directory Structure

Once created, navigate into your project folder. You will see a specific directory layout designed to separate concerns:

my-tauri-app/
├── src/              <-- Your Frontend Code
│   ├── index.html
│   ├── main.js
│   └── styles.css
├── src-tauri/        <-- Your Rust Backend
│   ├── src/
│   │   └── main.rs   <-- Application Entry Point
│   ├── Cargo.toml    <-- Rust Dependencies
│   └── tauri.conf.json <-- Tauri Configuration
├── package.json
└── ...

src: This is where your web developers live. It contains standard web assets. If you chose React or Vue, your components go here. Tauri is agnostic about what happens in this folder as long as it compiles to HTML/JS.
src-tauri: This is the engine room. It contains the Rust project that orchestrates the system window, menu, tray icons, and native capabilities.
src-tauri/tauri.conf.json: The command center. This file controls window size, permissions, bundle identifiers, and security settings.

Running the Development Server

To see your app in action, we need to run the development server. This command does two things: it starts a local web server for your frontend (like Vite) and compiles the Rust backend in debug mode.

cd my-tauri-app
npm install
npm run tauri dev

The first run might take a few minutes as it compiles the Rust dependencies. Once finished, a native window will pop up on your desktop displaying your web frontend.

Congratulations! You are now running a native desktop application powered by Tauri.