Rozenite for Web

    Experimental

    Rozenite for Web is an experimental feature. The API and behavior may change in future releases.

    Rozenite for Web lets you debug your React Native web app from React Native DevTools.

    To use it, you need:

    • the Rozenite browser extension
    • the @rozenite/web package in your app

    Browser support: Chromium-based browsers only.

    Prerequisites

    • A React Native project with web support
    • A Chromium-based browser with the Rozenite extension installed

    Rozenite for Web supports these setups:

    • Metro-only web: Metro bundles both mobile and web
    • Webpack for web: Webpack Dev Server bundles and serves the web app

    Chrome extension setup

    Download the latest extension from the GitHub releases.

    Installation

    1. Download the latest extension from the releases page.
    2. Open Chrome and go to chrome://extensions.
    3. Enable Developer mode (toggle in the top-right corner).
    4. Install the extension.

    If you need help with manual installation, see the Chrome extension loading guide.

    @rozenite/web package setup

    Installation

    npm
    yarn
    pnpm
    bun
    deno
    npm install -D @rozenite/web

    Metro-only web configuration

    Wrap your Metro config with withRozeniteWeb:

    const { getDefaultConfig } = require('expo/metro-config');
const { withRozeniteWeb } = require('@rozenite/web/metro');

const config = getDefaultConfig(__dirname);

module.exports = withRozeniteWeb(config);

    Entry point

    Add require('@rozenite/web') to your web entry point.

    The package gates its runtime setup internally, so you do not need to wrap the import with __DEV__ yourself.

    require('@rozenite/web');

    Common places:

    • main.tsx
    • Expo Router root _layout.tsx

    Webpack configuration

    Wrap your Webpack config with withRozeniteWeb:

    const { withRozeniteWeb } = require('@rozenite/web/webpack');

module.exports = withRozeniteWeb({
  // your existing webpack config
});

    Web entry point

    Use the same entry pattern when using Webpack too.

    How to use it

    1. Start your app in development mode.
    2. Open the web app in a Chromium-based browser.
    3. Press j in the terminal running your app.
    4. New debugging targets should now be available.
    5. Select the browser tab you want to debug.

    Troubleshooting

    • Make sure the extension is installed and enabled.
    • Make sure your app is running on localhost.
    • If you use Metro-only web, make sure withRozeniteWeb is added to Metro and require('@rozenite/web') is loaded in your web entry.
    • If you use Webpack, make sure your config is wrapped with withRozeniteWeb.

    Need React or React Native expertise you can count on?

    Let's talk