Rsbuild Integration Method#

Rsbuild is a high-performance scaffold tool developed in Rust language and maintained as open source by ByteDance.

Create Application#

$ npx create-rsbuild@latest

◆  Create Rsbuild Project
│
◇  Project name or path
│  my_app
│
◇  Select framework
│  React 19
│
◇  Select language
│  TypeScript
│
◇  Select additional tools (Use <space> to select, <enter> to continue)
│  Add Biome for code linting and formatting
│
◇  Next steps ─────────────╮
│                          │
│  1. cd my_app            │
│  2. git init (optional)  │
│  3. npm install          │
│  4. npm run dev          │
│                          │
├──────────────────────────╯
│
└  All set, happy coding!

Currently, we only support integration with TypeScript and React, so these two parameters must be selected as shown. Other options can be chosen according to your specific needs.

Install Dependencies#

You can use any package management tool to manage your project, such as npm, pnpm, yarn, etc.

$ cd my_app
$ npm install

Add Dependencies#

$ npm install wiscore @wisdesign/wis-plugin

Modify TypeScript Configuration#

Add the following configuration to the tsconfig.json configuration file:

{
  "compilerOptions": {
    "paths": {
      "*": ["./@mf-types/*"]
    }
  }
}

Add Configuration File#

Add the wis project-specific configuration file wis.config.ts and write the following content:

import type { WisConfig } from "@wisdesign/wis-plugin"
 
const config: WisConfig = {}
 
export default config

Add Plugin Configuration#

Modify the rsbuild.config.ts file to add the wis plugin configuration:

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { wisRsbuildPlugin } from "@wisdesign/wis-plugin";
 
export default defineConfig({
  plugins: [
    pluginReact(),
    wisRsbuildPlugin(),
  ],
});
 

Delete Files#

Delete the following files:

• src/App.tsx
• src/App.css
• src/index.tsx

Add Homepage#

Add the following directory structure:

Write the following content to the file:

// src/pages/index/Index.page.tsx
 
export default function Index() {
  return <div>Hello Wis!</div>
}

Start the Project#

Execute the start command:

$ npm run dev

Once the command is executed, you can simply visit http://localhost:3000 to see the project running.

Build the Project#

Execute the build command:

$ npm run build

Preview the Project#

Execute the preview command:

$ npm run build
$ npm run preview