Alex Hunt
c82cf64a22
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/39045 ## Context RFC: Decoupling Flipper from React Native core: https://github.com/react-native-community/discussions-and-proposals/pull/641 ## Changes - Relocates `metro-inspector-proxy` source from the Metro repo into the React Native repo as part of the `react-native/dev-middleware` package. - Drops the `runInspectorProxy` entry point. - Attaches the Inspector Proxy to the `createDevMiddleware()` API as the new integration point for this functionality. - Documents migrated endpoints + usage of `createDevMiddleware()` in README. Changelog: [Internal] Metro changelog: None (`metro-inspector-proxy` is now an internal component of `react-native`, covered in the [release notes for 0.78.1](https://github.com/facebook/metro/releases/tag/v0.78.1)) Reviewed By: motiz88, blakef Differential Revision: D48066213 fbshipit-source-id: 3fbef5d881f6f451cb5955dcbbc362c53347437e
@react-native/dev-middleware
Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
Usage
Middleware can be attached to a dev server (e.g. Metro) using the createDevMiddleware API.
import { createDevMiddleware } from '@react-native/dev-middleware';
function myDevServerImpl(args) {
...
const {middleware, websocketEndpoints} = createDevMiddleware({
host: args.host,
port: metroConfig.server.port,
projectRoot: metroConfig.projectRoot,
logger,
});
await Metro.runServer(metroConfig, {
host: args.host,
...,
unstable_extraMiddleware: [
middleware,
// Optionally extend with additional HTTP middleware
],
websocketEndpoints: {
...websocketEndpoints,
// Optionally extend with additional WebSocket endpoints
},
});
}
Included middleware
@react-native/dev-middleware is designed for integrators such as @expo/dev-server and @react-native/community-cli-plugin. It provides a common default implementation for core React Native dev server responsibilities.
We intend to keep this to a narrow set of functionality, based around:
- Debugging — The Chrome DevTools protocol (CDP) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
- Dev actions — Endpoints implementing core Dev Menu actions, e.g. reloading the app, opening the debugger frontend.
HTTP endpoints
DevMiddlewareAPI.middleware
These are exposed as a connect middleware handler, assignable to Metro.runServer or other compatible HTTP servers.
GET /json/list, /json (CDP)
Returns the list of available WebSocket targets for all connected React Native app sessions.
GET /json/version (CDP)
Returns version metadata used by Chrome DevTools.
POST /open-debugger
Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
Example
curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
WebSocket endpoints
DevMiddlewareAPI.websocketEndpoints
/inspector/device
WebSocket handler for registering device connections.
/inspector/debug
WebSocket handler that proxies CDP messages to/from the corresponding device.