mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

Alex Hunt 850e550422 Add serverBaseUrl option, set client-accessible URL value externally (#39456 )

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39456

**Fixes new debugger launch flow on Android:**

D49158227 aimed to improve proxy-safe behaviour for remote dev servers by auto-detecting the appropriate server URL for clients using the `Host` header (etc) from the HTTP request. However, this approach broke the local case for Android emulators and externally connected devices since they would originate from a device-relative server hostname — e.g. `10.0.2.2` for the stock Android emulator.

https://pxl.cl/3mVmR

This commit reverts to an explicit approach where callers specify the base URL to the dev server that should be addressible from the development machine — now as a single `serverBaseUrl` option.

**Changes**

- Adds new `serverBaseUrl` option to `createDevMiddleware`, designed to be the base URL value for constructing dev server URLs returned in endpoints such as `/json/list`.
    - This changes little for the `localhost` case (now enabling `https://` URLs), but enables remote dev server setups to specify this cleanly.
- Updates call site in `community-cli-plugin`.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D49276125

fbshipit-source-id: 2b6a8507073649832993971aa9d0870f54c9bd44

2023-09-15 13:11:04 -07:00

3.2 KiB

Raw Blame History

@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({
    projectRoot: metroConfig.projectRoot,
    serverBaseUrl: `http://${args.host}:${args.port}`,
    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.

Contributing

Changes to this package can be made locally and tested against the rn-tester app, per the Contributing guide. During development, this package is automatically run from source with no build step.

3.2 KiB Raw Blame History