Electron Rsbuild

https://electron-rsbuild.org/guide

Admin

Electron Rsbuild is a build tool for Electron applications based on the Rsbuild and Rspack...

Tokens:1,145

Snippets:24

Trust Score:4.8

Update:1 month ago

Show doc for...

Tokens:

Raw

### Install React plugin

Source: https://electron-rsbuild.org/guide/start/index

Manually install the official rsbuild React plugin for React-based projects.

```bash
pnpm add @rsbuild/plugin-react
```

--------------------------------

### Create an electron-rsbuild project

Source: https://electron-rsbuild.org/guide/start/index

Use the command line tool to initialize a new project template.

```bash
pnpm create electron-rsbuild@0.0.12
```

--------------------------------

### Define package.json scripts

Source: https://electron-rsbuild.org/guide/start/index

Add CLI commands to package.json for development, building, and previewing the application.

```json
{
  "scripts": {
    // Start development server
    "dev": "electron-rsbuild dev",
    // Build application for production
    "build": "electron-rsbuild build",
    // Preview production build locally
    "preview": "electron-rsbuild preview"
  }
}
```

--------------------------------

### Configure rsbuild.config.ts

Source: https://electron-rsbuild.org/guide/start/index

Manually configure rsbuild with main, preload, and renderer plugins for an Electron project.

```typescript
import { resolve } from 'path';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { mainPlugin } from '@electron-rsbuild/plugin-main';
import { preloadPlugin } from '@electron-rsbuild/plugin-preload';
import { rendererPlugin } from '@electron-rsbuild/plugin-renderer';

export default defineConfig({
  root: resolve(__dirname, '.'),
  environments: {
    // main
    main: {
      plugins: [mainPlugin()],
    },
    // preload
    preload: {
      plugins: [preloadPlugin()],
    },

    // renderer
    renderer: {
      plugins: [pluginReact(), rendererPlugin()],
    },
  },
});
```

Tokens:

Raw