Even Hub Development Guide

This guide explains how to build, test, and deploy applications for the Even Realities G2 Glasses using the even-dev Hub ecosystem.

Project Structure

The repository is organized as a monorepo where each app lives in its own folder under apps/.

/
├── apps/
│   ├── demo/           # Example app
│   ├── chess/          # Submodule app (requires specific build steps)
│   └── my-new-app/     # Your new app
├── src/
│   ├── Main.ts         # Global app loader (routes based on ?app=name)
│   └── ...
└── vercel.json         # Deployment config

Creating a New App

1. Create Directory: Create a new folder in apps/.

   mkdir apps/my-new-app

2. Metadata File (index.ts): Define your app's identity.
   Create apps/my-new-app/index.ts:

   import type { AppModule } from '../_shared/app-types'
   import { createActions } from './main'
   
   export const app: AppModule = {
     id: 'my-new-app',
     name: 'My New App',
     pageTitle: 'My G2 App',
     connectLabel: 'Connect',
     actionLabel: 'Do Something',
     initialStatus: 'Ready',
     createActions: createActions,
   }
   export default app

3. Logic File (main.ts): Implement the behavior.
   Create apps/my-new-app/main.ts:

   import type { AppActions, SetStatus } from '../_shared/app-types'
   
   export function createActions(setStatus: SetStatus): AppActions {
     return {
       async connect() {
         setStatus('Connecting to G2...')
         // Add initialization logic here
         setStatus('Connected!')
       },
       async action() {
         setStatus('Action button clicked!')
         // Add your core feature logic here
       },
     }
   }

Testing Locally

1. Start Dev Server:

   npm run dev

2. Open in Simulator:
   Navigate to http://localhost:5173/?app=my-new-app

   • Note: The query parameter ?app=<folder-name> is crucial. If omitted, it defaults to demo.

Deployment (Vercel)

This project is configured for Vercel static deployment.

1. Build: npm run build
2. Deploy: Push to Vercel (ensure vercel.json is present).
3. Access: https://your-deployment.vercel.app/?app=my-new-app

Important: generic apps vs "smart" apps

• Static Apps: Most apps (Demo, Clock) run entirely in the browser.
• WASM Apps (Chess): Require SharedArrayBuffer support. The project includes vercel.json headers (Cross-Origin-Opener-Policy: same-origin, Cross-Origin-Embedder-Policy: require-corp) to enable this.
• Backend Apps: Apps requiring custom backend proxies (Reddit, REST API) may not work fully on static Vercel hosting.

Debugging

• Console Logs: Check the browser console. Messages tagged [app-loader] or [ui] are from the framework.
• Bridge Events: Even G2 interactions are simulated via the web UI buttons if no glasses are connected.