Rsbuild

Rsbuild is an Rspack-based build tool that provides out-of-the-box setup for modern web applications.

Quickstart

To get started with Rsbuild in a Turborepo quickly, use the with-rsbuild example:

Terminal

pnpm dlx create-turbo@latest -e with-rsbuild

Terminal

yarn dlx create-turbo@latest -e with-rsbuild

Terminal

npx create-turbo@latest -e with-rsbuild

Terminal

bunx create-turbo@latest -e with-rsbuild

Adding an Rsbuild application to an existing repository

Use create-rsbuild to set up a new Rsbuild application in a package. From the root of your repository, run:

Terminal

pnpm dlx create-rsbuild@latest apps/my-app --template react

Terminal

yarn dlx create-rsbuild@latest apps/my-app --template react

Terminal

npx -y create-rsbuild@latest apps/my-app --template react

Terminal

bunx create-rsbuild@latest apps/my-app --template react

Integrating with your repository

To add Internal Packages to your new application, install them into the app with your package manager:

./apps/my-app/package.json

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

./apps/my-app/package.json

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

./apps/my-app/package.json

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

./apps/my-app/package.json

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

Make sure to run your package manager's install command. You also may need to update scripts in package.json to fit your use case in your repository.

Customizing tasks

By default, the new application will use the tasks defined in the root turbo.json. If you'd like to configure tasks differently for the new application, use Package Configurations.

Microfrontends

When using Rsbuild with Turborepo's microfrontends, set server.base for child applications. Rsbuild uses server.base as the default asset prefix for both development and production assets.

./apps/my-app/rsbuild.config.ts

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

export default defineConfig({
  server: {
    base: "/admin",
  },
});

Module Federation

For runtime composition with Rsbuild, use the with-rsbuild-module-federation example.

Terminal

pnpm dlx create-turbo@latest -e with-rsbuild-module-federation

Terminal

yarn dlx create-turbo@latest -e with-rsbuild-module-federation

Terminal

npx create-turbo@latest -e with-rsbuild-module-federation

Terminal

bunx create-turbo@latest -e with-rsbuild-module-federation

The example includes a react-host Rsbuild app, a react-remote Rsbuild app, and an @mf-rsbuild-example/shared-ui package. The host consumes the remote's exposed ./remote-app module through mf-manifest.json, and both apps share React dependencies through Module Federation.

During development, run turbo dev from the example root. The host uses Rsbuild's default port 3000 and the remote runs on localhost:3001.

./turbo.json

{
  "tasks": {
    "dev": {
      "cache": false,
      "persistent": true,
      "dependsOn": ["^build"]
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", "*.tsbuildinfo"]
    }
  }
}

Keep dev uncached and persistent for Rsbuild servers. Use dependsOn: ["^build"] so shared packages are built before the host and remote start.