Project Setup

The recommended stack for io.Connect applications is Vite + React + TypeScript. This guide covers single-app and multi-app monorepo structures.

Single App (Vite)

Terminal
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install @interopio/browser @interopio/react-hooks

Multi-App Structure

For io.Connect Browser projects, you typically have at least two apps: a Platform (host) and one or more Clients (children).

Recommended folder structure
my-project/
├── platform/         # Host app (@interopio/browser-platform)
│   ├── src/
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── types.ts  # Shared types (copied into each app)
│   ├── .env
│   ├── vite.config.ts
│   └── package.json
├── client-list/      # Client app (@interopio/browser)
│   ├── src/
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   ├── types.ts  # Same shared types (duplicated)
│   │   └── mockData.ts
│   ├── vite.config.ts
│   └── package.json
├── client-portfolio/ # Another client app
│   ├── src/
│   │   └── ...
│   └── package.json
└── shared/           # Source of truth for shared files
    ├── types.ts
    └── mockData.ts
Shared Files in Multi-App ProjectsVite scopes each project to its own root directory. For multi-app setups, copy shared files (like types.ts) into each app's src/ folder, or use a monorepo tool like Nx or Turborepo with a shared package.

Vite Config

Use fixed port numbers so the Platform app knows where to load client iframes:

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3001,    // Fixed port for this app
    strictPort: true,
  },
});

Environment Variables

For Browser Platform apps, store the license key in a .env file:

.env
VITE_IOCONNECT_LICENSE_KEY=your-license-key-here
Use import.meta.env.VITE_IOCONNECT_LICENSE_KEY in your TypeScript code. Vite exposes only variables prefixed with VITE_.
← PreviousInstallation