fbuild - Global Multi-Platform Builder

Build React/Next.js apps for web, desktop, and mobile from one codebase.

🚀 Quick Start

Install globally

npm install -g fbuild

Initialize in any React/Next.js project

cd my-react-app
fbuild init

Build everything

fbuild

📱 Platforms Supported

• 🌐 Web - Static sites, SPAs, or full Next.js servers
• 💻 Desktop - Windows, macOS, Linux (via Electron)
• 📱 Mobile - iOS, Android (via Capacitor)
• 🖥️ Server - Node.js, Docker, Serverless

🛠️ Commands

# Build all platforms
fbuild

# Build specific platforms
fbuild web
fbuild desktop
fbuild mobile
fbuild server

# Build specific OS targets
fbuild windows       # Windows desktop app
fbuild mac          # macOS desktop app
fbuild linux        # Linux desktop app
fbuild android      # Android mobile app
fbuild iphone       # iOS mobile app

# Development
fbuild dev desktop    # Electron dev mode

# Setup
fbuild init          # Interactive setup with prompts
fbuild help          # Show all commands

⚙️ Configuration

fbuild reads fbuild.config.js in your project root:

module.exports = {
  app: {
    id: 'com.yourcompany.yourapp',
    name: 'Your App Name',
    version: '1.0.0'
  },
  
  framework: 'nextjs', // 'react' | 'nextjs'
  
  // API server URLs for client apps
  api: {
    productionUrl: 'https://api.yourapp.com',
    developmentUrl: 'http://localhost:3000'
  },
  
  platforms: {
    web: { enabled: true, mode: 'server' },
    electron: { enabled: true },
    capacitor: { enabled: true },
    server: { enabled: true }
  }
};

🏗️ How It Works

Next.js Apps (Full-Stack)

• Server build: Full Next.js with API routes → Deploy as web server
• Client builds: Static exports → Desktop/mobile apps call your deployed API

React Apps (Client-Only)

• Web build: Standard React build → Static hosting
• Desktop/Mobile: Same React build → Electron/Capacitor wrapper

📂 Project Structure (After init)

your-app/
├── fbuild.config.js          # fbuild configuration
├── public/
│   ├── electron.js           # Electron main process (auto-generated)
│   └── fbuild-config.js      # Runtime API config (auto-generated)
├── capacitor.config.ts       # Capacitor config (auto-generated)
└── [your app files]

🔗 API Integration (Next.js)

fbuild automatically configures API URLs for different build targets:

// utils/api.ts
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

export const api = {
  async get(endpoint: string) {
    // Automatically points to:
    // - Development: http://localhost:3000/api/endpoint
    // - Mobile/Desktop: https://api.yourapp.com/api/endpoint
    const response = await fetch(`${API_URL}/api${endpoint}`);
    return response.json();
  }
};

📦 Build Outputs

• Web: out/ folder - Static export ready for deployment
• Desktop: build/windows/, build/mac/, build/linux/ - Platform-specific builds
• Mobile: build/android/, build/iphone/ - Native project builds
• Server: .next/ - Deployable Node.js server

🌟 Benefits

✅ One codebase → 6+ platforms
✅ Zero config → Sensible defaults, customize as needed
✅ Framework agnostic → Works with React or Next.js
✅ Global tool → Install once, use anywhere
✅ Clean projects → No build complexity in your repo

🔄 Development Workflow

1. Develop your React/Next.js app normally
2. Deploy server (if using Next.js API routes) → fbuild server
3. Build clients → fbuild (desktop/mobile apps call your deployed API)
4. Distribute → Apps work offline, server handles data

Perfect for building modern apps that work everywhere! 🚀