Running Dev Tools

Prerequisites

• Node.js 18+ and pnpm installed
• EdgeStream monorepo cloned: BizFirstAiStudio/src/edge-stream/
• An EdgeStream server running at https://localhost:10001 (or a custom URL)
• Dependencies installed: pnpm install from the monorepo root

Starting Dev Tools

# From the monorepo root (BizFirstAiStudio/src/edge-stream/):
pnpm --filter edge-stream-dev-tools dev

# Or change into the app directory:
cd apps/edge-stream-dev-tools
pnpm dev

# Dev server starts at:
# http://localhost:6005

# Default port is 6005 (set in vite.config.ts):
server: {
  port: parseInt(process.env.VITE_PORT ?? '6005'),
}

Vite Configuration

// apps/edge-stream-dev-tools/vite.config.ts

// Key settings:
export default defineConfig({
  plugins: [react()],
  base: process.env.VITE_BASE_URL ?? '/',

  server: {
    port: parseInt(process.env.VITE_PORT ?? '6005'),

    // API proxy — REST calls from /api/* are forwarded to the EdgeStream server:
    proxy: {
      '/api': {
        target: process.env.VITE_API_BASE_URL ?? 'https://localhost:10001',
        changeOrigin: true,
        secure: false,  // allows self-signed localhost dev certs
      },
    },
  },

  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

Environment Variables

Create a .env.local file in apps/edge-stream-dev-tools/ to override defaults:

# apps/edge-stream-dev-tools/.env.local
VITE_API_BASE_URL=https://myserver.example.com
VITE_PORT=6005

How the App Derives the Hub URL

// App.tsx — QuickStartPanel default:
const apiBaseUrl = 'https://localhost:10001'  // from VITE_API_BASE_URL

// handleConnect derives SignalR hub from apiBaseUrl:
const hubUrl = `${config.apiBaseUrl}/hubs/edge-stream`

// Resulting hub URL:
// https://localhost:10001/hubs/edge-stream

// Registered as a server:
streamInstance.registerServer({
  id: config.serverType,           // 'bas' or 'chat'
  type: config.serverType,
  url: hubUrl,
  transportConfig: {
    type: 'signalr',
    url: hubUrl,
    accessToken: config.accessToken,
  },
});

Quick Start Flow (First Time)

1. Ensure your EdgeStream server is running at https://localhost:10001.
2. Run pnpm dev in apps/edge-stream-dev-tools/.
3. Open http://localhost:6005 in your browser.
4. The Splash Screen displays for 2.5 seconds, then the QuickStartPanel appears.
5. Enter a display name (required). If Passport IAM is running, the JWT is auto-read from localStorage['auth-store'].
6. Click Go — DevTools connects to https://localhost:10001/hubs/edge-stream via SignalR and creates 3 demo groups (General, Announcements, Random).
7. After 3 seconds the Splash Screen closes and you land on the Chat page.

Custom Server Configuration

If your server is not at localhost:10001, use the Custom Configuration link on the QuickStartPanel:

// Custom Configuration opens the ConnectionPanel (from edge-stream-js-react):
// Fields:
// - Server URL:   https://your-server.com/hubs/edge-stream
// - Server Type:  bas | chat
// - Access Token: JWT (paste manually)
// - User Name:    display name for chat

// This bypasses the Passport auto-read and lets you specify any server.

Building for Production

# Build the production bundle:
cd apps/edge-stream-dev-tools
pnpm build

# Output: apps/edge-stream-dev-tools/dist/
# Static assets split into:
# dist/staticD30/images/   → image assets
# dist/staticD365/assets/  → JS + CSS chunks

# Preview the production build locally:
pnpm preview

Monorepo Aliases

The vite.config.ts resolves all workspace packages via path aliases — no published npm packages needed. All dependencies are resolved from the local monorepo source:

resolve: {
  alias: {
    'edge-stream-js':           '../../packages/edge-stream-js/src/index.ts',
    'edge-stream-js/react':     '../../packages/edge-stream-js/src/react/index.ts',
    'edge-stream-js-react':     '../../packages/edge-stream-js-react/src/index.ts',
    '@edge-stream/app-pages-react':       '../../packages/app-pages-react/src/index.ts',
    '@edge-stream/observability-react':   '../../packages/observability-react/src/index.ts',
    '@edge-stream/observability-ui':      '../../packages/observability-ui/src/index.ts',
    '@edge-stream/hooks':                 '../../packages/observability-hooks-js/src/index.ts',
    '@bizfirst/ancp-core':     '../../../ancp/ancp-core/src/index.ts',
    '@bizfirst/ancp-react':    '../../../ancp/ancp-react/src/index.ts',
    '@bizfirst/common-react':  '../../../bizfirst-common/bizfirst-common-react/src/index.ts',
  },
}