# 🚀 FX Framework - Production Deployment Guide

## 🎯 **Modern Stack: React + ShadCN + Hono + FX**

This guide shows how to deploy FX Framework in a production-ready modern web stack.

---

## 🏗️ **Architecture Overview**

```
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   React + ShadCN │    │  Hono Backend   │    │   Database      │
│                 │    │                 │    │                 │
│ • Components    │◄──►│ • FX Routes     │◄──►│ • PostgreSQL    │
│ • FX Hooks      │    │ • API Endpoints │    │ • SQLite        │
│ • Auto-loading  │    │ • Pre-loaded FX │    │ • MongoDB       │
└─────────────────┘    └─────────────────┘    └─────────────────┘
```

---

## 📦 **Build Process**

### **Step 1: Generate FX Bundles**

```bash
# Generate client bundle (auto-loading)
deno task build-manifest

# Generate server bundle (pre-loaded)
deno task build-server

# Or build both
deno task build-all
```

This creates:
- 📄 **`fx.ts`** - Client with auto-loading plugins
- 📄 **`server.fx.ts`** - Server with pre-loaded plugins
- 📄 **`fx-manifest.json`** - For VSCode auto-completion

### **Step 2: Deploy Frontend (React + ShadCN)**

```typescript
// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.tsx';

// Import FX with auto-loading
import('./fx/fx.js').then(({ fx, $$ }) => {
  window.fx = fx;
  window.$$ = $$;

  // FX is ready - start React app
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});
```

```tsx
// src/App.tsx
import { Dashboard } from './components/Dashboard';
import { UserManager } from './components/UserManager';

export default function App() {
  // FX globals auto-load when accessed
  const { useFX } = FXReact; // Auto-loads fx-react + dependencies
  const appName = useFX('app.name', 'My App');

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">{appName}</h1>
      <Dashboard />
      <UserManager />
    </div>
  );
}
```

### **Step 3: Deploy Backend (Hono + FX)**

```typescript
// server/main.ts
import { Hono } from 'hono';
import { serve } from 'hono/deno';

// Import pre-built FX server bundle
import {
  setupFXServer,
  fx,
  $$,
  $db,
  $flow,
  $api,
  $safe
} from '../server.fx.ts';

const app = new Hono();

// Initialize FX server with all plugins pre-loaded
const fxServer = setupFXServer(app, {
  cors: {
    origins: [
      'https://your-domain.com',
      'http://localhost:3000' // Dev
    ]
  }
});

// Your API routes - FX globals ready immediately!
app.get('/api/users', (c) => {
  const users = $db.users.all(); // Ready immediately!

  // Update reactive stats
  $$('api.stats.requests').set(
    ($$('api.stats.requests').get() || 0) + 1
  );

  return c.json(users);
});

app.post('/api/process', async (c) => {
  const data = await c.req.json();

  // Complex workflows with fx-flow - ready immediately!
  const result = $flow('dataProcessing')
    .node('validate', { runsOn: 'server', effect: validateData })
    .node('process', { runsOn: 'server', effect: processData })
    .node('save', { runsOn: 'server', effect: saveData })
    .start('validate', data);

  return c.json(result.data);
});

// Production deployment
serve({
  fetch: app.fetch,
  port: Number(Deno.env.get('PORT') || 8787)
});
```

---

## 🌐 **Environment Configuration**

### **Environment Variables**

```bash
# .env
PORT=8787
DATABASE_URL=postgresql://user:pass@localhost/myapp
ENVIRONMENT=production

# FX Configuration
FX_CORS_ORIGINS=https://your-domain.com,https://api.your-domain.com
FX_CACHE_TTL=3600000
FX_FLOW_TIMEOUT=30000
```

### **Docker Deployment**

```dockerfile
# Dockerfile
FROM denoland/deno:alpine

WORKDIR /app

# Copy FX framework
COPY fx/ ./fx/
COPY server.fx.ts ./
COPY server.fx.d.ts ./

# Copy your application
COPY server/ ./server/
COPY package.json ./

# Build FX bundles
RUN deno task build-all

# Start server
EXPOSE 8787
CMD ["deno", "run", "--allow-all", "server/main.ts"]
```

### **Production Optimization**

```typescript
// server/production.ts
import { setupFXServer } from '../server.fx.ts';

// Production-specific FX configuration
const fxServer = setupFXServer(app, {
  database: {
    connectionPool: 20,
    queryTimeout: 5000,
    enableMetrics: true
  },
  cache: {
    maxMemory: '512mb',
    persistToDisk: true,
    enableCompression: true
  },
  flow: {
    maxConcurrentFlows: 100,
    enableMetrics: true,
    timeoutMs: 30000
  },
  safe: {
    circuitBreakerThreshold: 50,
    retryAttempts: 3,
    timeoutMs: 10000
  }
});
```

---

## 📊 **Monitoring & Debugging**

### **Built-in FX Monitoring**

```typescript
// Health check endpoint with FX stats
app.get('/health', (c) => {
  return c.json({
    fx: {
      version: fx.version,
      nodes: $$('').nodes().length,
      plugins: Object.keys(globalThis).filter(k => k.startsWith('$')),
      uptime: Date.now() - $$('server.startTime').get(),
      memory: Deno.memoryUsage?.() || 'unavailable'
    },
    database: {
      connected: $db.isConnected,
      tables: $db.getTables?.() || [],
      queries: $$('db.stats.queries').get() || 0
    },
    flows: {
      active: $$('flows').select('.flow[status="running"]').length,
      completed: $$('flows.stats.completed').get() || 0,
      errors: $$('flows.stats.errors').get() || 0
    }
  });
});
```

### **Performance Monitoring**

```typescript
// API performance tracking
app.use('/api/*', async (c, next) => {
  const start = Date.now();
  const endpoint = c.req.path;

  await next();

  const duration = Date.now() - start;

  // Track in FX for analytics
  $$('api.performance').set({
    endpoint,
    duration,
    timestamp: start,
    status: c.res.status
  });

  // Alert on slow requests
  if (duration > 1000) {
    $$('alerts.slowRequests').set({
      endpoint,
      duration,
      timestamp: start
    });
  }
});
```

---

## 🎯 **Key Advantages**

### **✅ Development Experience**
- 🪄 **Auto-loading plugins** - Just use `$db`, `$api`, etc.
- 🔥 **Hot reload** - Change code, see results instantly
- 🎯 **VSCode integration** - Smart auto-completion
- 🔧 **Built-in debugging** - FX visualizer and dev tools

### **✅ Production Performance**
- ⚡ **Pre-loaded plugins** - Zero lazy loading overhead
- 🚀 **Single server process** - No separate FX server needed
- 💾 **Optimized bundle** - Only server-compatible plugins
- 📊 **Built-in monitoring** - Performance and health metrics

### **✅ Modern Stack Benefits**
- ⚛️ **React ecosystem** - Use any React library
- 🎨 **ShadCN components** - Beautiful, accessible UI
- 🔥 **Hono performance** - Blazing fast HTTP server
- 🪄 **FX reactivity** - Automatic state synchronization

---

## 🎊 **The Result**

**You get the best of all worlds:**

```typescript
// Backend - All FX globals ready immediately
app.get('/api/analytics', (c) => {
  const users = $db.users.where('[active=true]');     // fx-orm
  const flows = $flow.getRunning();                   // fx-flow
  const cache = $cache.get('analytics');              // fx-cache
  const safe = $safe.circuit('external-api');         // fx-safe

  return c.json({ users: users.length, flows, cache });
});

// Frontend - Auto-loading plugins
function MyComponent() {
  const { useFXAPI } = FXReact;                       // Auto-loads fx-react
  const analytics = useFXAPI('/api/analytics');       // Uses fx-api

  $('#stats').text(analytics.data?.users);           // Auto-loads fx-dom-dollar
  jsx.render('<div>Ready!</div>', '#status');        // Auto-loads fx-jsx

  return <Card>...</Card>; // ShadCN components
}
```

**Perfect synergy between modern tools and FX's reactive superpowers!** 🚀⚡🪄