Quickstart Guide

Get up and running with Frame-Master in under 5 minutes

📋Prerequisites

✓Bun v1.0.0 or higher installed ( v1.3.0+ recommended )
✓Basic knowledge of TypeScript/JavaScript
✓Understanding of web server concepts

⚡Installation

Install Frame-Master globally to use the CLI:

bun add -g frame-master

Or use it directly with bunx without installation

🚀Create Your First Project

Initialize a new Frame-Master project:

bun frame-master create my-project
# This creates frame-master.config.ts and .frame-master/ directory

This creates a minimal project structure:

Project Structure

my-project/
├── .frame-master/
│   ├── build/
│   ├── server.ts
│   ├── preload.ts
│   └── frame-master-custom-type.d.ts
├── frame-master.config.ts     # Your configuration
├── package.json
└── tsconfig.json

🔥Configure Your Framework

Frame-Master is plugin-based. Configure your setup in frame-master.config.ts:

frame-master.config.ts

import type { FrameMasterConfig } from "frame-master/server/types";

const config: FrameMasterConfig = {
  HTTPServer: {
    port: 3000,
  },
  plugins: [
    // Add your plugins here
    // Example: reactPlugin(), authPlugin(), etc.
  ],
};

export default config;

Frame-Master's power comes from its plugin system. Choose from official plugins or create your own to build your perfect stack.

⚡Start Development Server

Start the development server with hot reload:

bun frame-master dev

Your server will start on http://localhost:3000 (or your configured port). The dev server includes:

Hot module replacement
Automatic plugin reloading
File system watching
Development error pages

🔌Add Plugins

Extend Frame-Master with plugins. Install any plugin from npm:

bun add frame-master-plugin-react-ssr
# or any other Frame-Master plugin

Then add it to your configuration:

frame-master.config.ts

import type { FrameMasterConfig } from "frame-master/server/types";
import reactPlugin from "frame-master-plugin-react-ssr/plugin";

const config: FrameMasterConfig = {
  HTTPServer: { port: 3000 },
  plugins: [
    reactPlugin({
      // Plugin-specific options
    }),
  ],
};

export default config;