Configuration

The CLI Manager uses a single configuration file located at tools/cli-manager/src/config.ts. This file controls all aspects of the CLI's behavior.

Configuration Structure

export interface Config {
  apps: AppConfig[];
  editor: string;
  deploy: {
    staging: string;
    production: string;
  };
  logo: string[];
}

App Configuration

Each app in the monorepo is configured with the following properties:

AppConfig Interface

export interface AppConfig {
  name: string;        // Internal identifier
  displayName: string; // Name shown in menus
  path: string;        // Relative path from project root
  dev: string;         // Development command
  build: string;       // Build command
  port: number;        // Port number for dev server
  color: string;       // Hex color for UI elements
}

Current Apps

apps: [
  {
    name: 'instantdb',
    displayName: 'Tauri App',
    path: './apps/instantdb',
    dev: 'bun run dev',
    build: 'bun run build && bun run tauri:build',
    port: 42069,
    color: '#3b82f6'
  },
  {
    name: 'docs',
    displayName: 'Docs App',
    path: './apps/docs',
    dev: 'bun run dev',
    build: 'bun run build',
    port: 3000,
    color: '#10b981'
  }
]

Adding a New App

To add a new app to the CLI:

Open tools/cli-manager/src/config.ts
Add a new entry to the apps array:

{
  name: 'my-app',
  displayName: 'My New App',
  path: './apps/my-app',
  dev: 'bun run dev',
  build: 'bun run build',
  port: 4000,
  color: '#f59e0b'
}

Save and rebuild the CLI: cd tools/cli-manager && bun run build

The new app will immediately appear in all menus!

Global Settings

Editor

Specify your preferred code editor:

editor: 'cursor'  // or 'code', 'vim', 'nano', etc.

This is used when you press C to open an app in your editor.

Deployment Commands

Configure how apps are deployed:

deploy: {
  staging: 'vercel deploy',
  production: 'vercel deploy --prod'
}

You can customize these for other deployment platforms:

deploy: {
  staging: 'netlify deploy',
  production: 'netlify deploy --prod'
}

ASCII Logo

Customize the startup logo:

logo: [
  '╔═══════════════════════════════════════╗',
  '║                                       ║',
  '║     ███████ ██   ██ ██████  ██       ║',
  '║     ██      ██  ██  ██   ██ ██       ║',
  '║     ███████ █████   ██████  ██       ║',
  '║          ██ ██  ██  ██   ██ ██       ║',
  '║     ███████ ██   ██ ██   ██ ██       ║',
  '║                                       ║',
  '║         Project Manager v1.0          ║',
  '║                                       ║',
  '╚═══════════════════════════════════════╝'
]

Port Numbers

Each app needs a unique port. Common conventions:

3000-3999: Next.js apps
4000-4999: Documentation sites
5000-5999: API servers
8000-8999: Development tools
42069: Tauri app (custom)

Color Scheme

Colors are used for UI elements and can be any hex color:

#3b82f6 - Blue (default for primary apps)
#10b981 - Green (success, docs)
#f59e0b - Amber (warnings, tools)
#ef4444 - Red (errors, critical)
#8b5cf6 - Purple (special features)

Environment-Specific Configuration

For different environments, you can create multiple config files:

config.development.ts

export const config: Config = {
  apps: [...],
  deploy: {
    staging: 'echo "Dev mode - no deploy"',
    production: 'echo "Dev mode - no deploy"'
  }
}

config.production.ts

export const config: Config = {
  apps: [...],
  deploy: {
    staging: 'vercel deploy',
    production: 'vercel deploy --prod'
  }
}

Then import the appropriate config in index.ts.

Examples

Full Stack App

{
  name: 'fullstack',
  displayName: 'Full Stack App',
  path: './apps/web',
  dev: 'bun run dev',
  build: 'bun run build',
  port: 3001,
  color: '#3b82f6'
}

API Server

{
  name: 'api',
  displayName: 'API Server',
  path: './apps/api',
  dev: 'bun run dev',
  build: 'bun run build',
  port: 5000,
  color: '#10b981'
}

Storybook

{
  name: 'storybook',
  displayName: 'Component Library',
  path: './packages/ui',
  dev: 'bun run storybook',
  build: 'bun run build-storybook',
  port: 6006,
  color: '#ff4785'
}

Best Practices

1. Use Consistent Naming

name: lowercase, no spaces (used internally)
displayName: Proper case, user-friendly

2. Keep Paths Relative

Always use relative paths from project root:

✅ ./apps/my-app
❌ /home/user/project/apps/my-app

3. Test Commands First

Before adding to config, test commands manually:

cd apps/my-app
bun run dev  # Make sure this works

4. Choose Unique Ports

Check for port conflicts:

lsof -i :3000  # See what's using port 3000

5. Use Descriptive Colors

Choose colors that make sense:

Blue for main apps
Green for docs/tools
Amber for experiments
Red for critical services

Validation

The CLI validates configuration on startup:

✅ All required fields present
✅ Ports are numbers
✅ Paths exist
✅ Commands are strings
✅ No duplicate port numbers

If validation fails, you'll see a clear error message.

Rebuilding After Changes

After modifying the config:

cd tools/cli-manager
bun run build

Or use dev mode for live reloading:

cd tools/cli-manager
bun run dev

Configuration

Configuration

Configuration Structure

App Configuration

AppConfig Interface

Current Apps

Adding a New App

Global Settings

Editor

Deployment Commands

ASCII Logo

Port Numbers

Color Scheme

Environment-Specific Configuration

config.development.ts

config.production.ts

Examples

Full Stack App

API Server

Storybook

Best Practices

1. Use Consistent Naming

2. Keep Paths Relative

3. Test Commands First

4. Choose Unique Ports

5. Use Descriptive Colors

Validation

Rebuilding After Changes

TypeScript Benefits

Next Steps

Features

Usage Guide

Getting Started

On this page