HaexHub SDK Demo (React)

This is a demo application showcasing the HaexHub SDK integration with React and TypeScript.

Features

• Database operations (CREATE TABLE, INSERT, SELECT)
• Table name prefixing using getTableName()
• High-level SDK API (client.query(), client.execute())
• React hooks for reactive state management
• TypeScript with functional components

Setup

Install dependencies:

npm install

Development

Option 1: Test as HaexHub Extension (Recommended)

This is the proper way to test the extension with full HaexHub integration:

1. Start the dev server:

   npm run ext:dev

2. Open HaexHub and load the dev extension:

   • Click on "Extensions" or "Add Extension"
   • Select "Load Dev Extension"
   • Choose this project directory

The extension will now run inside HaexHub with full access to the SDK APIs.

Option 2: Standalone Development

For UI development without HaexHub:

npm start

Note: Database operations will not work in standalone mode as they require HaexHub's runtime environment.

Build & Package

Build and sign the extension for production:

npm run ext:build

This creates a signed .haextension file that can be installed in HaexHub.

Project Structure

haex-demo-react/
├── src/
│   ├── App.tsx                # Main demo component
│   ├── App.css                # Styles
│   └── index.tsx              # Entry point
├── haextension/
│   ├── manifest.json          # Extension metadata
│   ├── public.key             # Public signing key
│   ├── private.key            # Private signing key (not in git)
│   └── icon.svg               # Extension icon
├── haextension.config.json    # Extension dev configuration
└── package.json

Learn More

• HaexHub SDK Documentation
• React Documentation