App Bridge development guide

App Bridge is the client-side component of Genstore SDK, offering React components and tools for seamless integration with the Genstore admin backend.

TIP

App Bridge is exclusively designed for embedded apps. Its React components function as communication tools and feature slots interfacing with the store backend layer. The store backend handles most core functionalities.

Installation

CLI project (recommended)

Projects created through CLI come with App Bridge pre-installed, no separate installation required.

Custom project

npm install @genstore/app-bridge-react

React components

AppProvider

Handles the automatic import and initialization of bridge.js.

NavMenu

Integrates your app's navigation with the Genstore backend.

Property	Required	Type
Children	No	Link

Example

import { json } from '@remix-run/node';
import { Link, Outlet } from '@remix-run/react';

import { AppProvider, NavMenu } from '@genstore/app-bridge-react';

const Navs = () => {
  return (
    <NavMenu>
      <Link to="/app/home" rel="home">
        Home
      </Link>
      <Link to="/app/guide" rel="plans">
        Guide
      </Link>
      <Link to="/app/plans" rel="plans">
        Plans
      </Link>
    </NavMenu>
  );
};
export default function App() {
  return (
    <AppProvider>
      <Navs />
      <Outlet />
    </AppProvider>
  );
}

useAppBridge

Provides access to the bridge instance and its APIs.

import { useAppBridge } from '@genstore/app-bridge-react';

export default function Page() {
  const bridge = useAppBridge();
  return <div>Bridge</div>
}

API reference

config object

Property	Description
shopId	Unique identifier for the current shop
locale	Shop's language and region settings

info object

Property	Description
id_token	Authentication token for current session (distinct from Open API token)
darkMode	UI theme state, synchronized with store backend preferences

Component library

Under construction