Web Support

React Native Esbuild supports all platforms, including Web.

See a demo application built with a web target here (opens in a new tab).

Setup

Install Dependencies

Install react-native-web (opens in a new tab) and react-dom (opens in a new tab).

yarn add react-native-web react-dom

⚠️

react-dom version must match with the react version in your package.json

Create Web Entry

Create entry index.web.js file for Web.

import { AppRegistry } from 'react-native';
import { App } from './src/App';
import { name as appName } from './app.json';
 
AppRegistry.runApplication(
  AppRegistry.registerComponent(appName, () => App),
  {
    rootTag: document.getElementById('root'),
  },
);

Development and Build

# rne serve: Start the development server for Web 
# visit http://localhost:8081 (default)
rne serve
 
# rne bundle: Build the bundle for the provided JavaScript entry file
rne bundle \
  --platform=web \
  --entry-file=index.web.js \
  --bundle-output=dist/index.js
 
# bundle result example
dist
├── back-icon-TRKDMJBN.png
├── back-icon-mask-JPKVDL4L.png
├── esbuild-YFSWKYAM.png
├── index.html
├── index.js
└── index.js.map

Page Template

Default Template

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <title>React Native Esbuild</title>
    <style>
      body {
        position: fixed;
        width: 100%;
        height: 100%;
        -webkit-touch-callout: none;
          -webkit-user-select: none;
           -khtml-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
      }
 
      #root {
        display: flex;
        flex: 1 1 100%;
        height: 100%;
      }
    </style>  
  </head>
  <body>
    <div id="root"></div>
    <script src="{{_bundle}}"></script>
  </body>
</html>

Custom Template

If you want to use your own custom template, specify template path to configuration file.

// react-native-esbuild.config.js
exports.default{
  web: {
    template: 'custom-template.html',
  },
};

<!-- custom-template.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Template</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="{{_bundle}}"></script>
  </body>
</html>

Placeholders

You can replace the {{name}} format strings in template through the web.placeholders configuration.

The reserved placeholder names are _ prefixed name. It will be overridden your placeholders.

_bundle: the bundle file path

// react-native-esbuild.config.js
exports.default = {
  web: {
    placeholders: {
      placeholder_name: 'Hello, world!'
      // reserved placeholder name.
      // It will be overridden by bundler.
      _bundle: 'custom value',
    },
  },
};

<!-- Before -->
<div>{{placeholder_name}}</div>
<script src="{{_bundle}}"></script>
 
<!-- After -->
<div>Hello, world!</div>
<script src="index.js"></script>

Presets Transformer