Skip to content

Training Module: Fleet Operations Center Setup

Introduction

Prerequisites

Complete Academy Training Module 1: Command Station Setup before proceeding.

Welcome back, cadet! In this advanced training module, you'll learn to establish a Fleet Operations Center - a sophisticated monorepo structure that allows multiple Starfleet applications and systems to work together seamlessly.

Academy Mission Briefing: Objective

Construct a unified Fleet Operations Center capable of managing multiple ships, shared technologies, and coordinated missions from a single command structure.

By completing this module, you'll have a working monorepo with shared components and multiple applications - demonstrating the organizational structure used by Starfleet to manage complex, multi-ship operations!

Ready to advance your Academy training, cadet?

Training Protocol

  1. Establish Fleet Command Structure
    1. Initialize Fleet Command Center
    2. Configure Fleet Manifest
    3. Establish Workspace Boundaries
    4. Create Fleet Directories
    5. Install Coordination Systems
    6. Configure Mission Control
  2. Deploy Fleet Components
    1. Create Shared Technology Package
    2. Deploy Flagship Application
    3. Integrate Fleet Systems
    4. Activate Fleet Operations

Establish Fleet Command Structure

Initialize Fleet Command Center

First, create your Fleet Operations Center directory and initialize the command structure. Choose a location for your fleet headquarters:

mkdir starfleet-fleet-ops
cd starfleet-fleet-ops

Now we'll initialize the fleet command center using our replicator systems:

pnpm init

We should see a new package.json file created in our fleet directory.

We're building what Starfleet calls a Fleet Operations Center - a coordination structure for multiple ships and shared technologies. We'll see how this works as we build it.

Configure Fleet Manifest

Our fleet needs a proper manifest documenting its mission and capabilities. Let's open our command station interface (VSCodium) and edit the package.json file:

code .

Now we'll update our fleet manifest with appropriate Starfleet documentation:

package.json
{
  "name": "@starfleet-technology/prototype",//(1)!
  "version": "1.0.0",
  "description": "State-of-the-Art Prototype",//(2)!
  "private": true,
  "scripts": {
    "dev": "turbo dev", //(3)!
    "build": "turbo build", //(4)!
    "test": "turbo test" //(5)!
  },
  "keywords": ["starfleet-technology"], //(6)!
  "author": "Starfleet Academy Cadet", //(7)!
  "license": "MIT"
}
  1. Use a proper Name for your fleet operations center. We recommend using a custom namepaced format like @starfleet-technology/*.
  2. Provide a concise Description of your fleet's mission.
  3. Define the dev script to launch fleet operations.
  4. Define the build script to compile all fleet systems.
  5. Define the test script to run fleet diagnostics.
  6. Add relevant Keywords to help identify your fleet's purpose.
  7. Specify the Author of the fleet operations center.

Establish Workspace Boundaries

Create the workspace configuration file that defines your fleet's operational boundaries. Create a new file called pnpm-workspace.yaml:

pnpm-workspace.yaml
packages:
  - 'apps/*' # (1)!
  - 'packages/*' # (2)!
  1. This line designates the apps/ directory for individual ship applications within your fleet. Think "everything that sails the stars."
  2. This line designates the packages/ directory for shared Starfleet technologies used across the fleet. Think "common systems and protocols."

Academy Note: Workspace Boundaries

This configuration tells your replicator system where to find different types of fleet components - shared packages and individual ship applications.

Create Fleet Directories

Let's establish the standard Starfleet directory structure for our fleet operations:

mkdir packages
mkdir apps

We should now see two new directories in our fleet operations center: - packages/: For shared Starfleet technologies used across the fleet - apps/: For individual ship applications and specialized systems

Install Coordination Systems

Our fleet needs a coordination system to manage complex, multi-ship operations. Let's install Turbo, the preferred Starfleet fleet coordination system:

pnpm add -D turbo

Turbo will coordinate build operations, testing procedures, and deployment sequences across all ships in our fleet.

Configure Mission Control

Now we'll create the mission control configuration file turbo.json to define our fleet operations protocols:

turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "ui": "tui",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "test": {
      "dependsOn": ["^build"]
    }
  }
}

Fleet command structure established, cadet!

Deploy Fleet Components

Create Shared Technology Package

Now we'll create our first shared Starfleet technology package. This will contain common systems used across our fleet:

cd packages
mkdir starfleet-ui
cd starfleet-ui

Let's initialize the shared technology package:

pnpm init

We should see another package.json file created. Now we'll configure our shared technology manifest:

packages/starfleet-ui/package.json
{
  "name": "@starfleet/ui",
  "version": "1.0.0",
  "description": "Shared Starfleet UI Components",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

Now we'll create our shared technology source file:

packages/starfleet-ui/src/index.ts
export function renderStarfleetButton(text: string): string {
  return `
    <button class="starfleet-button">
      🖖 ${text}
    </button>
  `;
}

export function displayFleetStatus(shipCount: number): string {
  return `Fleet Status: ${shipCount} ships operational`;
}

Let's add our TypeScript configuration:

packages/starfleet-ui/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Deploy Flagship Application

Let's return to our fleet operations center and create our flagship application:

cd ../../apps
pnpm create vite enterprise --template vanilla-ts
cd enterprise

We'll configure the flagship application to use our fleet technologies. Let's update the flagship manifest:

apps/enterprise/package.json
{
  "name": "@starfleet/enterprise",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@starfleet/ui": "workspace:*"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^5.4.10"
  }
}

Integrate Fleet Systems

Now we'll integrate our shared Starfleet technologies into the flagship application. Let's update the main application file:

apps/enterprise/src/main.ts
import { renderStarfleetButton, displayFleetStatus } from '@starfleet/ui'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <h1>🚀 USS Enterprise - NCC-1701</h1>
    <div class="fleet-operations">
      ${renderStarfleetButton('Engage')}
      <p>${displayFleetStatus(12)}</p>
      <div class="mission-status">
        <h2>Mission Status: Operational</h2>
        <p>All systems functioning within normal parameters.</p>
        <p>Ready for fleet coordination operations.</p>
      </div>
    </div>
  </div>
`

We'll add fleet-appropriate styling:

apps/enterprise/src/style.css
:root {
  font-family: 'Courier New', monospace;
  background-color: #0a0a0a;
  color: #00ff00;
}

.starfleet-button {
  background-color: #001122;
  border: 2px solid #00ff00;
  color: #00ff00;
  padding: 10px 20px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: all 0.3s ease;
}

.starfleet-button:hover {
  background-color: #00ff00;
  color: #001122;
}

.fleet-operations {
  border: 1px solid #00ff00;
  padding: 20px;
  margin: 20px 0;
  background-color: rgba(0, 255, 0, 0.1);
}

.mission-status {
  margin-top: 20px;
  padding: 15px;
  border-left: 3px solid #00ff00;
}

Activate Fleet Operations

Let's return to our fleet operations center root and install all fleet dependencies:

cd ../..
pnpm install

We should see all dependencies installed across our fleet. Now we'll build our shared technologies:

cd packages/starfleet-ui
pnpm build

We should see our TypeScript compilation complete. Now let's activate our flagship application:

cd ../../apps/enterprise
pnpm dev

Our fleet coordination system should display: 

Local: http://localhost:5173

Let's Access Our Fleet Operations Dashboard

We can open our web browser and navigate to: http://localhost:5173

We should see our USS Enterprise dashboard displaying: - The starship heading with fleet operations styling - A functional "Engage" button with Starfleet theming - Fleet status showing 12 operational ships - Mission status confirmation

Outstanding work, cadet! Your Fleet Operations Center is now fully operational, with shared technologies successfully deployed across your fleet!

Academy Training Module 2: Complete!

Exceptional performance, cadet! You have successfully established a Fleet Operations Center with coordinated multi-ship capabilities. Your understanding of advanced Starfleet organizational structures is now Academy-certified.

Training Objectives Completed:

Configured Fleet Operations Center structure
Deployed shared Starfleet technology packages
Created flagship application with fleet integration
Verified coordinated fleet operations

Next Steps

Ready to expand your fleet operations? Consider adding more ships to our fleet or developing specialized mission packages in future Academy modules.

  • Next Training Modules

    • Deploy Additional Fleet Vessels (Advanced Academy Course - Coming Soon)
    • Implement Inter-Ship Communications (Specialized Training - In Development)

  • Fleet Management Commands

    Reactivate Our Fleet Operations: 

    cd starfleet-fleet-ops
pnpm dev

  • Support Resources

    Experiencing fleet coordination difficulties? The Fleet Operations Manual is being updated by Command Division.

  • Technical References