Skip to main content

Getting Started

Step 0: Verify Your Setup​

After installing the prerequisites, verify your setup by running the following commands in your terminal:

  • Deno:

    deno --version

  • Rust:

    rustc --version
    cargo --version

  • Node.js (if installed):

    node --version
    npm --version

Step 1: Scaffold the Project​

  1. Open your terminal.

  2. Run the following command to create a new Tauri project with Vite and TypeScript:

    deno run -A npm:create-tauri-app@latest

  3. Follow the prompts:

    • ✔ Project name · your-tauri-project
    • ✔ Identifier · com.your-tauri-project.app
    • ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
    • ✔ Choose your package manager · deno
    • ✔ Choose your UI template · Vanilla
    • ✔ Choose your UI flavor · TypeScript

Step 2: Navigate to the Project Folder​

  1. Move into the project folder: 
    cd your-tauri-project

Step 3: Install Tauri API for Deno​

  1. Install the Tauri API for Deno: 
    deno task tauri add dialog

Step 4: Configure Vite​

  1. Open the vite.config.ts file in your project and ensure it looks like this:

    import { defineConfig } from "vite";
    import deno from "vite-plugin-deno";

    export default defineConfig({
      plugins: [deno()],
    });

  2. If you don’t have vite-plugin-deno installed, add it:

    deno add vite-plugin-deno

Step 5: Set Up the Frontend​

  1. Open the src/main.ts file and replace its content with this basic TypeScript example:

    import { invoke } from "@tauri-apps/api";

    // Create a button that calls a Tauri command
    const app = document.querySelector<HTMLDivElement>("#app")!;
    app.innerHTML = `
      <h1>Hello, Tauri + Vite!</h1>
      <button id="greet-btn">Say Hello</button>
      <p id="message"></p>
    `;

    // Add event listener to the button
    const greetBtn = document.querySelector<HTMLButtonElement>("#greet-btn")!;
    const message = document.querySelector<HTMLParagraphElement>("#message")!;

    greetBtn.addEventListener("click", async () => {
      const response = await invoke("greet", { name: "Tauri User" });
      message.textContent = response as string;
    });

Step 6: Set Up the Tauri Backend​

  1. Open the src-tauri/src/main.rs file and add a simple command:

    #[tauri::command]
    fn greet(name: &str) -> String {
        format!("Hello, {}!", name)
    }

    fn main() {
        tauri::Builder::default()
            .invoke_handler(tauri::generate_handler![greet])
            .run(tauri::generate_context!())
            .expect("error while running tauri application");
    }

Step 7: Run the Development Server​

  1. Install dependecies:

    deno install

  2. Start the Tauri development medium:

    deno task tauri dev

    This will open a desktop window with your app running.

Step 8: Build the App​

  1. Build the production version:

    deno task build

  2. The installer will be located in:

    • Windows: .msi file in src-tauri/target/release/bundle/msi/.
    • Linux: .deb or .AppImage file in src-tauri/target/release/bundle/.
    • macOS: .dmg file in src-tauri/target/release/bundle/dmg/.

Project Structure​

tauri-vite-app/
├─ src/            # Vite frontend (TypeScript)
│  ├─ main.ts      # Entry point
│  └─ assets/      # Static assets
├─ src-tauri/      # Tauri backend (Rust)
│  ├─ src/         # Rust source files
│  └─ tauri.conf.json # Tauri configuration
├─ deno.json       # Deno configuration
└─ vite.config.ts  # Vite configuration