Manual Setup Using the Tauri CLI

Start in an empty directory. You can set up your frontend however you want—the only requirement is that you can serve the built files as static assets and that a development server runs during development.

A common choice is Vite because it is lightweight and works with many frameworks. The example below creates a vanilla JavaScript Vite project, but you can replace the template with react-ts, vue, svelte, or any other supported option.

Choose the tab that matches your package manager:

mkdir my-tauri-app
cd my-tauri-app
npm create vite@latest . -- --template vanilla
npm install

If you are using a different framework (Next.js, Nuxt, Leptos, Yew, plain static files), set up your project as you normally would. The only thing Tauri cares about is the dev server URL and the output directory for production builds.

The Tauri CLI (tauri) is the tool that initialises the Rust side, starts the development loop, and builds the final application bundle. You can install it in two ways: as a local development dependency of your Node.js project, or globally via Cargo.

Local installation (recommended for JavaScript/TypeScript projects) pins the CLI version in your package.json, so everyone on the team uses the same version.

npm install -D @tauri-apps/cli@latest

After installation you can verify the CLI is available. If you installed it locally, prefix commands with npx (or use yarn tauri, pnpm tauri, bun tauri):

npx tauri --version

During development Tauri opens a native window and points it at your frontend dev server. You need to tell Tauri exactly which URL to load. The default depends on the tool:

If you changed the port in your frontend config, use the URL you configured. You can check by starting your dev server now and looking at the terminal output:

npm run dev

Write down the full URL including the port. You will need it in the next step.

The tauri init command scans your project and asks a few questions to generate the src-tauri directory. Run it from the root of your project (the folder that contains your package.json or frontend config):

npx tauri init

You will see a series of interactive prompts. Here is what each one means and how to answer it for a typical Vite project:

• App name – The human-readable name of your application. This shows up in window titles, about dialogs, and bundle metadata. Use something like my-tauri-app.
• Window title – The default title shown in the title bar. Usually the same as the app name.
• Web assets location – The directory that contains your production build output, relative to the src-tauri/tauri.conf.json file that will be created. For a Vite project the build output goes to dist by default, so you would enter ../dist. If your build tool outputs to build, out, or target, adjust accordingly.
• Dev server URL – The URL from Step 3. For Vite this is normally http://localhost:5173.
• Frontend dev command – The command Tauri runs to start your dev server when you execute tauri dev. For a Vite project this is typically npm run dev, yarn dev, pnpm dev, or bun dev.
• Frontend build command – The command Tauri runs to create a production build before packaging the app. For Vite it is npm run build (or the equivalent for your package manager).

After you answer, tauri init creates a src-tauri folder with the following files:

src-tauri/
├── Cargo.toml          # Rust package manifest and dependencies
├── tauri.conf.json     # Tauri configuration (window, build, bundle)
├── src/
│   └── lib.rs          # Rust entry point and plugin registration
├── icons/              # Default application icons
└── capabilities/       # Permissions for Tauri APIs

For detailed configuration options of tauri.conf.json, see tauri.conf.json. Permissions are declared inside the capabilities Directory.

Some development servers watch the entire project directory for file changes and restart when a file is modified. The src-tauri folder contains Rust source files, compiled artifacts, and the Tauri configuration. If your frontend dev server watches these files, it can trigger unnecessary rebuilds and consume extra CPU.

Vite is the most common tool where this matters. Add a server.watch.ignored option to your vite.config.ts (or vite.config.js):

import { defineConfig } from "vite";
export default defineConfig({
  server: {
    watch: {
      ignored: ["**/src-tauri/**"],
    },
  },
});

If you are using Webpack, you can configure watchOptions.ignored similarly. For Next.js, Nuxt, or SvelteKit the default watcher configuration usually does not traverse outside the source directory, so no extra change is necessary.