Rspack Integration

This page is the Part.2 of configuration, we will add a middleware in dev-server to receives API from Inspector Component, and call your local IDE/Editor to open the source file from server side. Please make sure you have already added the Inspector Component in your project as Part.1.

In this section, follow the simple setup below to integrate react-dev-inspector into your Rspack (opens in a new tab) project.

Setup

At first install the package:

npm i -D @react-dev-inspector/middleware

This package provides a launchEditorMiddleware, just add it in your rscpack.config.ts by devServer.setupMiddlewares (opens in a new tab):

Note: Place launchEditorMiddleware as far forward in the middleware sequence as possible, before other middlewares.

import type { Configuration } from '@rspack/cli'
import { launchEditorMiddleware } from '@react-dev-inspector/middleware'
 
const config: Configuration = {
  context: process.cwd(),
  entry: {
    main: './src/main.tsx',
  },
 
  ...
 
  devServer: {
    setupMiddlewares(middlewares) {
      /** react-dev-inspector server config for rspack */
      middlewares.unshift(launchEditorMiddleware)
      return middlewares
    },
  },
}
 
export default config

Example

Example project code you can find in examples/rspack (opens in a new tab).