Quick Start#

Overview#

electron-rsbuild is a tool built on rsbuild, based on a core plugin approach, respecting rsbuild APIs and configuration, providing a complete set of project capabilities:

• A set of commands to quickly create electron-rsbuild template projects.
• Pre-configured rsbuild configurations for the main process, renderer, and preload scripts.
• Core capabilities implemented through plugins. You can also use the plugins or configurations provided by electron-rsbuild to run an Electron project directly without installing electron-rsbuild.

You can read the backstory in the Introduction chapter.

Installation#

Create an electron-rsbuild project#

pnpm create [email protected]

React Plugin#

For React projects, you need to manually install @rsbuild/plugin-react:

pnpm add @rsbuild/plugin-react

This plugin is provided by the official rsbuild team. Please refer to the documentation for details.

Vue Plugin#

TODO

Templates#

The following templates are currently available:

rsbuild Project Modification#

If you don't want to use the scaffold provided by electron-rsbuild, you can also install the following three configured and plugin-based rsbuild plugins to start rsbuild:

• @electron-rsbuild/plugin-main
• @electron-rsbuild/plugin-preload
• @electron-rsbuild/plugin-renderer

Configure in rsbuild.config.ts:

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()],
    },
  },
});

Command Line#

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

Core npm Packages#

@electron-rsbuild/core#

The core package of electron-rsbuild, providing plugin-based development environment invocation, CLI commands, etc.

create-electron-rsbuild#

Used to create electron-rsbuild project templates