Rsbuild Development

Overview

This skill helps you work with Rsbuild development tasks including building, running dev server, linting, formatting, and configuration.

Key Files

Configuration

• rsbuild.config.ts - Main Rsbuild configuration
• package.json - Scripts and dependencies
• tsconfig.json - TypeScript configuration
• .eslintrc or eslint.config.js - ESLint configuration
• .prettierrc - Prettier configuration
• tailwind.config.js - Tailwind CSS configuration

Available Scripts

Development Server

pnpm dev

• Starts dev server on port 3002
• Opens browser automatically
• Hot Module Replacement (HMR) enabled
• Watch mode for file changes

Build for Production

pnpm build

• Creates optimized production build
• Output in dist/ directory
• Minified and bundled assets
• TypeScript compilation

Preview Production Build

pnpm preview

• Serves the production build locally
• Test production build before deployment

Linting

pnpm lint

• Runs ESLint on all source files
• Checks for code quality issues
• Reports errors and warnings

Code Formatting

pnpm format

• Formats code with Prettier
• Applies consistent code style
• Formats all files in project

Rsbuild Configuration

Current Setup

// rsbuild.config.ts
import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

const { publicVars } = loadEnv();

export default defineConfig({
  server: {
    port: 3002
  },
  resolve: {
    alias: {
      '@': './src',
    },
  },
  source: {
    define: publicVars,
  },
  plugins: [
    pluginReact(),
  ]
});

Key Features

• Port: 3002 (configurable)
• Path Alias: @ maps to ./src
• Environment Variables: PUBLIC_* vars exposed to client
• React Plugin: JSX/TSX support with optimizations

Common Tasks

Starting Development

1. Ensure dependencies are installed:

   pnpm install
   

2. Start dev server:

   pnpm dev
   

3. Application opens at http://localhost:3002

Building for Production

1. Run build:

   pnpm build
   

2. Check output in dist/ directory

3. Preview build locally:

   pnpm preview
   

Fixing Lint Errors

1. Run linter to see issues:

   pnpm lint
   

2. Many issues can be auto-fixed:

   pnpm lint --fix
   

3. Review and fix remaining issues manually

Formatting Code

1. Format all files:

   pnpm format
   

2. Check format without writing:

   pnpm format --check
   

TypeScript Configuration

Key Settings

• Strict Mode: Enabled for type safety
• JSX: React JSX support
• Path Mapping: @/* maps to ./src/*
• Target: Modern ES syntax

Type Checking

npx tsc --noEmit

• Checks types without emitting files
• Useful for CI/CD pipelines

ESLint Configuration

Enabled Rules

• React Hooks rules
• React Refresh rules
• TypeScript ESLint rules
• Custom project rules

Key Rules

• No unused variables
• Consistent code style
• React best practices
• TypeScript strict checks

Prettier Configuration

Prettier ensures consistent formatting:

• 2-space indentation
• Single quotes
• Semicolons
• Trailing commas
• Line width: 80 characters (configurable)

Environment Variables

Public Variables

All PUBLIC_* environment variables are exposed to client:

PUBLIC_REST_API_URL=http://localhost:4000/api
PUBLIC_GRAPHQL_API_URL=http://localhost:4000/graphql
PUBLIC_KEYCLOAK_URL=http://localhost:8080
PUBLIC_KEYCLOAK_REALM=your-realm
PUBLIC_KEYCLOAK_CLIENT_ID=your-client-id

Using in Code

const apiUrl = import.meta.env.PUBLIC_REST_API_URL;

Environment Files

• .env - Default environment
• .env.local - Local overrides (gitignored)
• .env.production - Production values

Adding Rsbuild Plugins

Available Official Plugins

• @rsbuild/plugin-react - React support (already included)
• @rsbuild/plugin-sass - SASS/SCSS support
• @rsbuild/plugin-less - Less support
• @rsbuild/plugin-vue - Vue support
• @rsbuild/plugin-svgr - SVG as React components

Installing a Plugin

pnpm add -D @rsbuild/plugin-sass

Adding to Configuration

import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginSass(),
  ]
});

Configuring Build Options

Output Configuration

export default defineConfig({
  output: {
    distPath: {
      root: 'dist',
      js: 'js',
      css: 'css',
    },
    assetPrefix: '/admin/',
  },
});

Source Configuration

export default defineConfig({
  source: {
    entry: {
      index: './src/index.tsx',
    },
  },
});

Performance Configuration

export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience',
    },
  },
});

Debugging Build Issues

Common Issues

1. Build Fails

   • Check TypeScript errors: npx tsc --noEmit
   • Review error messages carefully
   • Verify all imports are correct
   • Check for missing dependencies

2. Dev Server Won't Start

   • Check if port 3002 is already in use
   • Verify environment variables
   • Check for syntax errors in config files
   • Clear cache: rm -rf node_modules/.cache

3. HMR Not Working

   • Restart dev server
   • Check browser console for errors
   • Verify React Fast Refresh is enabled
   • Check component exports are named

4. Import Errors

   • Verify path aliases in tsconfig.json and rsbuild.config.ts
   • Check file extensions (.ts, .tsx, .js, .jsx)
   • Ensure files exist at expected paths

Performance Optimization

Code Splitting

Rsbuild automatically code-splits:

• Vendor bundles (node_modules)
• Async components (lazy imports)
• Dynamic imports

Tree Shaking

• Remove unused exports
• Use named imports
• Avoid side effects

Caching

• Long-term caching for assets
• Content-based hashing
• Incremental builds in dev

CI/CD Integration

Build Script

pnpm install
pnpm lint
pnpm build

Type Checking

npx tsc --noEmit

Testing

pnpm test  # If tests are configured

Best Practices

1. Always lint and format before committing
2. Use path aliases (@/) for cleaner imports
3. Test production builds locally before deploying
4. Keep dependencies updated regularly
5. Use environment variables for configuration
6. Enable strict TypeScript for better type safety
7. Monitor build size and optimize as needed
8. Use code splitting for large applications

Quick Reference

Task	Command
Start dev server	pnpm dev
Build production	pnpm build
Preview build	pnpm preview
Lint code	pnpm lint
Format code	pnpm format
Type check	npx tsc --noEmit
Install deps	pnpm install
Add dependency	pnpm add package-name
Add dev dependency	pnpm add -D package-name

Example Workflow

When starting development:

1. Pull latest code
2. Install dependencies: pnpm install
3. Start dev server: pnpm dev
4. Make changes with HMR
5. Lint code: pnpm lint
6. Format code: pnpm format
7. Type check: npx tsc --noEmit
8. Build: pnpm build
9. Test build: pnpm preview
10. Commit changes