Skip to content

bridge_installation.md

Latest commit

 

History

History
57 lines (40 loc) · 2.2 KB

bridge_installation.md

File metadata and controls

57 lines (40 loc) · 2.2 KB
permalink /reference/bridge-installation.html
order 3
title Bridge Installation
description Install Hotwire Native Bridge in your web app.

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"