Create-React-App 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 create-react-app (opens in a new tab) project.

Setup customize-cra

Before setup with react-dev-inspector, let's assume you have use customize-cra (opens in a new tab) and react-app-rewired (opens in a new tab) to override the create-react-app config in your project, because create-react-app doesn't provide configuration capabilities of its own.

If not yet, please follow the customize-cra (opens in a new tab) document to work at first.

Now you should already replace the react-scripts with react-app-rewired in your package.json file likes:

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }
}

and already have a config-overrides.js for customize-cra.

Setup react-dev-inspector

Install the middleware package and add it to your config-overrides.js:

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

const {
  override,
  overrideDevServer,
} = require('customize-cra')
const { launchEditorMiddleware } = require('@react-dev-inspector/middleware')
 
module.exports = {
  /**
   * react-dev-inspector server config for webpack-dev-server
   */
  devServer: overrideDevServer(
    serverConfig => {
      // https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares
      serverConfig.setupMiddlewares = (middlewares) => {
        middlewares.unshift(launchEditorMiddleware)
        return middlewares
      }
 
      return serverConfig
    },
  ),
 
  webpack: override(
    ...
  ),
}

Example

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

(opens in a new tab)