Skip to content

Installation

To build Bridge Components in your native app, you’ll need to first install the Hotwire Native Bridge javascript library in your web app. Hotwire Native Bridge can either be referenced in compiled form via the distributable script directly in the <head> of your application, or through npm via a bundler like esbuild.

﹟ Prerequisite: Install Stimulus

Bridge Components in your web app leverage Stimulus and the core BridgeComponent class is an extension of a Stimulus Controller. You must have Stimulus installed in your web app before installing Hotwire Native Bridge. See the Stimulus installation instructions.

﹟ In Compiled Form

If you’re using importmap-rails you just need to pin Stimulus and Hotwire Native Bridge in your config/importmap.rb file:

./bin/importmap pin @hotwired/stimulus @hotwired/hotwire-native-bridge

Alternatively, you can manually define importmap entries for both Hotwire Native Bridge and Stimulus, pointing to the latest versions of each:

<head>
  <script type="importmap">
    {
      "imports": {
        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@latest/dist/stimulus.min.js",
        "@hotwired/hotwire-native-bridge": "https://cdn.jsdelivr.net/npm/@hotwired/hotwire-native-bridge@latest/dist/hotwire-native-bridge.min.js"
      }
    }
  </script>
</head>

Then you can import Hotwire Native Bridge anywhere in your application code:

import { BridgeComponent } from "@hotwired/hotwire-native-bridge"

class BridgeTest extends BridgeComponent {
  // ...
}

﹟ As An npm Package

You can install Hotwire Native Bridge from npm via the npm or yarn packaging tools and use a JavaScript bundler, like webpack or esbuild, to import it in your application.

import "@hotwired/hotwire-native-bridge"

Next: Bridge Components