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

Files

T

Moti Zilberman bf51035e04 Scaffolding for custom RNDT shell binary (#52357 )

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

Changelog: [Internal]

Adds a hyper-minimal build script using `electron/packager` that produces custom binaries for the experimental React Native DevTools standalone shell. The main user-facing benefit of this is replacing the Electron name and icon with our own branding.

NOTE: `electron/packager` is designed to include the application code in the resulting binary. This is arguably overkill for us - the current launch model of `electron src/electron/index.js` is actually wholly sufficient for what we need - but I decided to go with the grain of the available tooling for simplicity.

Icon design courtesy of huntie. 🙏

Reviewed By: huntie

Differential Revision: D77591742

fbshipit-source-id: a968465df4f54fba54c874b6300788e151600ed7

2025-07-02 03:48:51 -07:00

__tests__

Scaffold debugger-shell package (#51688 )

2025-05-30 02:23:12 -07:00

src

Scaffolding for custom RNDT shell binary (#52357 )

2025-07-02 03:48:51 -07:00

package.json

Scaffolding for custom RNDT shell binary (#52357 )

2025-07-02 03:48:51 -07:00

README.md

Scaffold debugger-shell package (#51688 )

2025-05-30 02:23:12 -07:00

README.md

@react-native/debugger-shell

Experimental Electron-based shell for React Native DevTools. This package is not part of React Native's public API.

Why Electron?

The React Native DevTools frontend is based on Chrome DevTools, which is a web app, but is not particularly portable: it's designed to run in Chromium, and Chromium only. Prior to @react-native/debugger-shell, we would run it in hosted mode in an instance of Chrome or Edge.

Relying on hosted mode presents a variety of UX issues in the debugging workflow, such as the need to ask developers to install a particular browser before they can debug in React Native, and the inability to foreground/reuse existing debugger windows when relaunching the debugger for the same app. In order to address these issues effectively, we fundamentally need to leave the browser sandbox and run the debugger in a shell we can bundle with React Native, and whose behavior we can control.

Electron is a tried-and-tested framework for the specific task of embedding a Chromium browser in a portable, customized shell. As a rule we'll hold a high bar for performance and reliability, and we'll only add features to the shell if they are strictly necessary to complement the DevTools frontend's built-in capabilities.