Switch to Rsbuild

Rspack is a drop-in replacement for webpack with much higher performance and more powerful features. Rsbuild is a build tool powered by Rspack offering a more streamlined developer experience. In this lab we’ll take the create-tauri-app vanilla TypeScript scaffold, which ships with Vite, and migrate it to Rsbuild without breaking the app’s IPC.

Swap Vite for Rsbuild

Point the package.json scripts at rsbuild, swap the devDependency, and add rsbuild.config.ts. The scaffold keeps its entry in src/main.ts and its own index.html, so the config names both and lets Rsbuild inject the bundle script in place of the hardcoded Vite tags. The stylesheet moves with it: the <link> leaves index.html and src/main.ts imports styles.css instead.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/src/styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri App</title>
    <script type="module" src="/src/main.ts" defer></script>
  </head>

  <body>

"version": "0.1.0",
"type": "module",
"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "dev": "rsbuild dev",
  "build": "rsbuild build",
  "preview": "rsbuild preview",
  "tauri": "tauri"
},
"dependencies": {

  },
  "devDependencies": {
    "@tauri-apps/cli": "^2",
    "vite": "^8.0.16",
    "@rsbuild/core": "^1.6.12",
    "typescript": "~6.0.3"
  }
}

import { defineConfig } from "@rsbuild/core";

const host = process.env.TAURI_DEV_HOST;

// Docs: https://rsbuild.rs/config/
export default defineConfig({
  source: {
    // create-tauri-app keeps the entry in src/, not rsbuild's default location
    entry: { index: "./src/main.ts" },
  },
  html: {
    // reuse the scaffold's page; rsbuild injects the bundle script itself
    template: "./index.html",
  },
  server: {
    // Tauri expects a fixed port, fail if that port is not available
    strictPort: true,
    // if the host Tauri is expecting is set, use it
    host: host || undefined,
  },
  dev: {
    client: host
      ? {
          protocol: "ws",
          host,
          port: 1421,
        }
      : undefined,
  },
  output: {
    // don't minify for debug builds
    minify: !process.env.TAURI_ENV_DEBUG,
    // produce sourcemaps for debug builds
    sourceMap: !!process.env.TAURI_ENV_DEBUG,
  },
  tools: {
    rspack: {
      watchOptions: {
        // .git and node_modules are ignored by rsbuild by default
        // src-tauri usually does not contain frontend files so it's ignored here as well
        ignored: ["**/.git", "**/node_modules", "**/src-tauri/**"],
      },
    },
  },
});

import { invoke } from "@tauri-apps/api/core";
import "./styles.css";

let greetInputEl: HTMLInputElement | null;
let greetMsgEl: HTMLElement | null;

The TAURI_DEV_HOST handling in the config keeps the development server reachable when running on iOS physical devices.

Point Tauri at the Dev Server

Configure the Tauri CLI to use the Rsbuild development server and dist folder. The scaffold’s hooks already run the right scripts (pnpm dev, pnpm build, and ../dist as frontendDist), while devUrl still expects Vite’s port 1420 instead of Rsbuild’s default 3000, so the port is the only change:

"identifier": "com.tatu.rsbuild",
"build": {
  "beforeDevCommand": "pnpm dev",
  "devUrl": "http://localhost:1420",
  "devUrl": "http://localhost:3000",
  "beforeBuildCommand": "pnpm build",
  "frontendDist": "../dist"
},

Refer to the Rsbuild documentation for the full configuration surface. For other build tools and frameworks, see Frontend Configuration.

Support on Open Collective Sponsor on GitHub