Appboxo Web SDK Sample - Host App

Reference implementation for integrating Appboxo Web SDK into a web application to host miniapps.

Overview

This sample demonstrates how to integrate @appboxo/web-sdk into a React web application to host miniapps in an iframe.

Quick Start

npm install
npm start

App runs on http://localhost:3000 and expects miniapp on http://localhost:3000 (or configure your miniapp URL).

Key Integration Steps

1. Install SDK

npm install @appboxo/web-sdk

2. Initialize SDK

import { AppboxoWebSDK } from "@appboxo/web-sdk";

const appboxoWebSDK = new AppboxoWebSDK({
  clientId: "your-client-id-here", // Replace with actual clientId from Appboxo dashboard
  appId: "your-app-id-here", // Replace with actual appId from Appboxo dashboard
  debug: true,
});

3. Set Auth Code

// Get auth_code from your backend
const authCode = await getAuthCodeFromBackend();
appboxoWebSDK.setAuthCode(authCode);

4. Initialize with iframe

const iframe = document.getElementById("miniapp-iframe");
appboxoWebSDK.setIframe(iframe);
appboxoWebSDK.initialize();

Configuration

Update these values in src/App.tsx:

• clientId: Your client identifier from Appboxo dashboard
• appId: Miniapp identifier from Appboxo dashboard
• auth_code: Authentication code from your backend (use sample values for testing)
• iframe.src: Your miniapp URL

Project Structure

src/
├── App.tsx              # Main app component with SDK integration
├── App.css              # Styles
└── index.tsx            # Entry point

Production Setup

For production, replace sample credentials with real backend integration:

// Get from backend and set
const authCode = await fetch('/api/auth-code').then(r => r.json());
appboxoWebSDK.setAuthCode(authCode);

Development

# Install dependencies
npm install

# Start dev server
npm start

# Build for production
npm run build

Notes

• This is a sample implementation demonstrating SDK integration
• Production implementation should connect to your backend for authentication
• Auth code should be generated by your backend based on user session