OpenNoodl/dev-docs/tasks/phase-5-multi-target-deployment/README.md

# Multi-Target Deployment Initiative

**Initiative ID:** INITIATIVE-001  
**Priority:** HIGH  
**Estimated Duration:** 16-22 weeks  
**Status:** Planning  
**Last Updated:** 2025-12-28

## Executive Summary

Transform Noodl from a web-only visual programming platform into a true multi-target development environment. Users will be able to build once and deploy to:

- **Web** (current) - Static sites, SPAs, PWAs
- **Mobile** (Capacitor) - iOS and Android native apps with device APIs
- **Desktop** (Electron) - Windows, macOS, Linux apps with file system access
- **Browser Extension** (Chrome) - Extensions with browser API access

Additionally, this initiative introduces **BYOB (Bring Your Own Backend)**, enabling users to connect to any BaaS platform (Directus, Supabase, Pocketbase, Firebase, etc.) rather than being locked to a single provider.

## Core Insight

Noodl's visual graph is already target-agnostic in principle. The nodes define *what* happens, not *where* it runs. Currently, tooling assumes web-only deployment, but the architecture naturally supports multiple targets through:

1. **Target-specific node libraries** (Capacitor Camera, Electron File System, etc.)
2. **Conditional runtime injection** (Capacitor bridge, Node.js integration)
3. **Target-aware export pipelines** (different build outputs per target)

## Strategic Value

| Target | Value Proposition |
|--------|-------------------|
| **Capacitor** | Mobile apps without learning Swift/Kotlin. Hot-reload preview. |
| **Electron** | Desktop apps with file access, offline capability, local AI (Ollama). |
| **Chrome Extension** | Browser tools, productivity extensions, content scripts. |
| **BYOB** | No vendor lock-in. Use existing infrastructure. Self-hosted options. |

## Project Architecture

### Current State
```
Graph Definition → Single Runtime (React/Web) → Single Deployment (Static Web)
```

### Target State
```
                                    ┌─→ Web Runtime ─────→ Static Web / PWA
                                    │
Graph Definition → Target Adapter ──┼─→ Capacitor Runtime → iOS/Android App
                                    │
                                    ├─→ Electron Runtime ─→ Desktop App
                                    │
                                    └─→ Extension Runtime → Chrome Extension
                                    
                    ↓
            Backend Abstraction Layer
                    ↓
    ┌───────────┬───────────┬───────────┬───────────┐
    │ Directus  │ Supabase  │ Pocketbase│  Custom   │
    └───────────┴───────────┴───────────┴───────────┘
```

## Target Selection System

### Philosophy

The graph itself is largely target-agnostic—it's the *nodes available* and *deployment output* that differ. This enables maximum flexibility while maintaining focused UX.

### User Experience Flow

#### 1. Project Creation
```
┌─────────────────────────────────────────────────────────────────────┐
│ Create New Project                                                  │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│ Project Name: [My App                              ]                │
│                                                                     │
│ Primary Target:                                                     │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ○ 🌐 Web Application                                            │ │
│ │   Static sites, SPAs, PWAs. Deploy anywhere.                    │ │
│ │                                                                 │ │
│ │ ● 📱 Mobile App (Capacitor)                        RECOMMENDED │ │
│ │   iOS and Android. Access camera, GPS, push notifications.     │ │
│ │                                                                 │ │
│ │ ○ 🖥️ Desktop App (Electron)                                     │ │
│ │   Windows, macOS, Linux. File system, local processes.         │ │
│ │                                                                 │ │
│ │ ○ 🧩 Browser Extension                                          │ │
│ │   Chrome extensions. Browser APIs, content scripts.            │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│                                                                     │
│ ⓘ You can add more targets later in Project Settings               │
│                                                                     │
│                                    [Cancel]  [Create Project]       │
└─────────────────────────────────────────────────────────────────────┘
```

#### 2. Adding Additional Targets (Project Settings)
```
┌─────────────────────────────────────────────────────────────────────┐
│ Project Settings → Targets                                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│ PRIMARY TARGET                                                      │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 📱 Mobile App (Capacitor)                            [Change]   │ │
│ │ Determines default node palette and preview mode                │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│                                                                     │
│ ADDITIONAL TARGETS                                                  │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ☑ 🌐 Web Application                                            │ │
│ │ ☐ 🖥️ Desktop App (Electron)              [Configure...]         │ │
│ │ ☐ 🧩 Browser Extension                   [Configure...]         │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│                                                                     │
│ NODE COMPATIBILITY                                                  │
│ ⚠️ 3 nodes in your project are incompatible with some targets:     │
│   • Camera Capture - Only Capacitor, Electron                      │
│   • Push Notification - Only Capacitor                             │
│   • File System Read - Only Electron, Extension                    │
│                                                                     │
│ [View Compatibility Report]                                         │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘
```

#### 3. Node Palette with Compatibility Badges
```
┌─────────────────────────────────────────────────────────────────────┐
│ Node Palette                                         [🔍 Search]   │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│ ▼ DEVICE & PLATFORM                                                 │
│   ┌─────────────────────────────────────────────────────────────┐   │
│   │ 📷 Camera Capture              [📱] [🖥️]                    │   │
│   │ 📍 Geolocation                 [🌐] [📱] [🖥️] [🧩]          │   │
│   │ 🔔 Push Notification           [📱]                         │   │
│   │ 📁 File System Read            [🖥️] [🧩]                    │   │
│   │ 📁 File System Write           [🖥️]                         │   │
│   │ ⚙️ Run Process                  [🖥️]                         │   │
│   └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│ ▼ BROWSER EXTENSION                                                 │
│   ┌─────────────────────────────────────────────────────────────┐   │
│   │ 🗂️ Extension Storage           [🧩]                         │   │
│   │ 📑 Browser Tabs                [🧩]                         │   │
│   │ 💬 Content Script Message      [🧩]                         │   │
│   └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│ ▼ DATA & BACKEND                                                    │
│   ┌─────────────────────────────────────────────────────────────┐   │
│   │ 📊 Query Records               [🌐] [📱] [🖥️] [🧩]          │   │
│   │ ➕ Create Record               [🌐] [📱] [🖥️] [🧩]          │   │
│   │ ✏️ Update Record               [🌐] [📱] [🖥️] [🧩]          │   │
│   │ 🌐 HTTP Request                [🌐] [📱] [🖥️] [🧩]          │   │
│   └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│ Legend: [🌐] Web  [📱] Mobile  [🖥️] Desktop  [🧩] Extension        │
└─────────────────────────────────────────────────────────────────────┘
```

#### 4. Duplicate as Different Target
```
┌─────────────────────────────────────────────────────────────────────┐
│ Duplicate Project                                                   │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│ Source: My Mobile App (Capacitor)                                   │
│                                                                     │
│ New Project Name: [My Mobile App - Web Version    ]                 │
│                                                                     │
│ New Primary Target:                                                 │
│ ● 🌐 Web Application                                                │
│ ○ 🖥️ Desktop App (Electron)                                        │
│ ○ 🧩 Browser Extension                                              │
│                                                                     │
│ COMPATIBILITY ANALYSIS                                              │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ✅ 47 nodes are fully compatible                                │ │
│ │ ⚠️ 3 nodes need attention:                                      │ │
│ │                                                                 │ │
│ │   📷 Camera Capture                                             │ │
│ │   └─ Will use browser MediaDevices API (reduced features)      │ │
│ │                                                                 │ │
│ │   🔔 Push Notification                                          │ │
│ │   └─ Will use Web Push API (requires HTTPS, user permission)   │ │
│ │                                                                 │ │
│ │   📁 File System Read                                           │ │
│ │   └─ ❌ Not available in web. Will be disabled.                 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│                                                                     │
│                              [Cancel]  [Duplicate with Adaptations] │
└─────────────────────────────────────────────────────────────────────┘
```

### Technical Implementation

```typescript
// Project configuration model
interface NoodlProject {
  // Existing fields
  name: string;
  components: Component[];
  settings: ProjectSettings;
  
  // NEW: Target Configuration
  targets: TargetConfiguration;
  
  // NEW: Backend Configuration (BYOB)
  backends: BackendConfig[];
  activeBackendId: string;
}

interface TargetConfiguration {
  // Primary target determines default node palette and preview mode
  primary: TargetType;
  
  // Additional enabled targets
  enabled: TargetType[];
  
  // Per-target settings
  web?: WebTargetConfig;
  capacitor?: CapacitorTargetConfig;
  electron?: ElectronTargetConfig;
  extension?: ExtensionTargetConfig;
}

type TargetType = 'web' | 'capacitor' | 'electron' | 'extension';

interface WebTargetConfig {
  pwa: boolean;
  serviceWorker: boolean;
  baseUrl: string;
}

interface CapacitorTargetConfig {
  appId: string;           // com.example.myapp
  appName: string;
  platforms: ('ios' | 'android')[];
  plugins: string[];       // Enabled Capacitor plugins
  iosTeamId?: string;
  androidKeystore?: string;
}

interface ElectronTargetConfig {
  appId: string;
  productName: string;
  platforms: ('darwin' | 'win32' | 'linux')[];
  nodeIntegration: boolean;
  contextIsolation: boolean;
  permissions: ElectronPermission[];
}

interface ExtensionTargetConfig {
  manifestVersion: 3;
  name: string;
  permissions: string[];    // chrome.storage, chrome.tabs, etc.
  hostPermissions: string[];
  contentScripts?: ContentScriptConfig[];
  serviceWorker?: boolean;
}
```

## Phase Overview

| Phase | Name | Duration | Priority | Dependencies |
|-------|------|----------|----------|--------------|
| **A** | [BYOB Backend System](../01-byob-backend/README.md) | 4-6 weeks | 🔴 Critical | HTTP Node |
| **B** | [Capacitor Mobile Target](../02-capacitor-mobile/README.md) | 4-5 weeks | 🔴 High | Phase A |
| **C** | [Electron Desktop Target](../03-electron-desktop/README.md) | 3-4 weeks | 🟡 Medium | Phase A |
| **D** | [Chrome Extension Target](../04-chrome-extension/README.md) | 2-3 weeks | 🟢 Lower | Phase A |
| **E** | [Target System Core](../05-target-system/README.md) | 2-3 weeks | 🔴 Critical | Before B,C,D |

### Recommended Execution Order

```
Phase E (Target System Core) ─┬─→ Phase B (Capacitor) ─┐
                              │                        │
Phase A (BYOB Backend) ───────┼─→ Phase C (Electron) ──┼─→ Integration & Polish
                              │                        │
                              └─→ Phase D (Extension) ─┘
```

**Rationale:**
1. **Phase A (BYOB) and Phase E (Target System)** can proceed in parallel as foundation
2. **Phase B (Capacitor)** is highest user priority - mobile apps unlock massive value
3. **Phase C (Electron)** leverages existing `noodl-platform-electron` knowledge
4. **Phase D (Extension)** is most niche but relatively quick to implement

## Success Criteria

### MVP Success (Phase A + B complete)
- [ ] Users can configure Directus/Supabase as backend without code
- [ ] Data nodes work with configured backend
- [ ] Schema introspection populates dropdowns
- [ ] Capacitor preview with hot-reload works
- [ ] Can export iOS/Android-ready Capacitor project
- [ ] Camera, Geolocation, and Push nodes work in Capacitor

### Full Success (All phases complete)
- [ ] All four deployment targets working
- [ ] Seamless target switching in project settings
- [ ] Compatibility badges on all nodes
- [ ] Build-time validation prevents incompatible deployments
- [ ] "Duplicate as Target" feature works with adaptation analysis
- [ ] Multiple backends configurable per project

## Risk Assessment

| Risk | Likelihood | Impact | Mitigation |
|------|------------|--------|------------|
| Capacitor plugin complexity | Medium | High | Start with 3 core plugins, expand gradually |
| Backend abstraction leakiness | High | Medium | Accept platform-specific features won't abstract |
| Electron security concerns | Medium | High | Clear UI separation, sandboxed by default |
| Extension manifest v3 limitations | Medium | Medium | Document limitations, focus on popup use case |
| Scope creep | High | High | Strict phase gates, MVP-first approach |

## Related Documentation

- [BYOB Backend System](../01-byob-backend/README.md) - Extensive backend flexibility documentation
- [Capacitor Mobile Target](../02-capacitor-mobile/README.md) - Mobile app deployment
- [Electron Desktop Target](../03-electron-desktop/README.md) - Desktop app deployment
- [Chrome Extension Target](../04-chrome-extension/README.md) - Browser extension deployment
- [Target System Core](../05-target-system/README.md) - Node compatibility and target selection

## References

- Previous BYOB discussion: https://claude.ai/chat/905f39ae-973b-4c19-a3cc-6bf08befb513
- Existing deployment system: `packages/noodl-editor/src/editor/src/views/DeployPopup/`
- Existing preview system: `packages/noodl-editor/src/frames/viewer-frame/src/views/viewer.js`
- Platform abstraction: `packages/noodl-platform-electron/`
- TASK-002: Robust HTTP Node (prerequisite)