Server-Side 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.

react-dev-inspector provides a pure middleware and many integrated plugins for popular frameworks, you can choose one of them to integrate into your project.

Frameworks Integration

All behind those interaction plugins is the @react-dev-inspector/middleware,

for other frameworks, you can use the middleware directly in your framework's dev-server.

Inspector Middleware

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

This package mainly just provides a launchEditorMiddleware, that is an Express.js (opens in a new tab) / Connect.js (opens in a new tab) compatible request middleware.

import { launchEditorMiddleware } from '@react-dev-inspector/middleware'

Usage Examples

For example, use with webpack-dev-server (opens in a new tab) / webpack-dev-middleware (opens in a new tab):

const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')
 
module.exports = {
  ...
 
  devServer: {
    setupMiddlewares(middlewares) {
      middlewares.unshift(launchEditorMiddleware)
      return middlewares
    },
  },
}