Vite Plugin

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 Vite (opens in a new tab) project.

Setup

At first install the plugin package:

npm i -D @react-dev-inspector/vite-plugin

The @react-dev-inspector/vite-plugin only register a inspectorServer middleware to launch the local editor with an endpoint using @react-dev-inspector/middleware (opens in a new tab), that compatible with vite@5 / vite@4 / vite@3 / vite@2.

Just add it into vite.config.ts and that's all done.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { inspectorServer } from '@react-dev-inspector/vite-plugin'
 
// https://vitejs.dev/config/
export default defineConfig({
  ...
 
  plugins: [
    react(),
 
    /**
     * react-dev-inspector server config for vite
     */
    inspectorServer(),
  ],
})

Example

Example project code you can find in examples/vite4 (opens in a new tab), or see online demo via:

(opens in a new tab)