init Command

Initialize Frame-Master in an existing project.

📖 Usage

Basic command syntax.

terminal

frame-master init [options]

# Or with bunx
bunx frame-master init

⚙️ Options

Available flags.

-v, --verboseEnable detailed logging

-h, --helpShow help

📦 What It Creates

Files added to your project.

`frame-master.config.ts`

Main configuration file for Frame-Master settings including port, plugins, and build options.

`bunfig.toml`

Bun configuration with JSX settings and module resolution for Frame-Master compatibility.

`src/pages/` directory

Creates the pages directory structure where your route components will live.

⚙️ Generated Configuration

Default configuration file content.

terminal

frame-master create my-app

structure

my-app/
├── frame-master.config.ts
├── .frame-master/
│   ├── preload.ts
│   ├── server.ts
│   ├── frame-master-custom-type.d.ts
│   └── build/
├── bunfig.toml
├── package.json
└── tsconfig.json

📂 Generated Files

What's included in a new project.

frame-master.config.ts

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

export default {
  HTTPServer: {
    port: 3000,
  },
  plugins: [],
} satisfies FrameMasterConfig;

package.json

{
  "name": "<project-name>",
  "module": "index.ts",
  "type": "module",
  "private": true,
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5"
  },
  "dependencies": {
    "frame-master": "^2.1.1"
  },
  "scripts": {
    "dev": "NODE_ENV=development bun --hot frame-master dev",
    "start": "NODE_ENV=production bun frame-master start"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "ESNext"
    ],
    "target": "ESNext",
    "module": "Preserve",
    "moduleDetection": "force",
    "jsx": "react-jsx",
    "allowJs": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  },
  "include": [
    "**/*",
    ".frame-master/frame-master-custom-type.d.ts"
  ]
}

bunfig.toml

preload = ["./.frame-master/preload.ts"]

.env

WEB_TOKEN_SECRET=<TOKEN_SECRET>

🚀 Workflow

Using init in an existing project.

terminal

# Navigate to your project
cd my-existing-project

# Add Frame-Master dependency
bun add frame-master

# Initialize Frame-Master
frame-master init

# Start development
frame-master dev

💡

The init command will not overwrite existing files. If a config file already exists, it will skip that file.

🤔 When to Use

init vs create.

Scenario	Command
New project from scratch	`frame-master create`
Add to existing React project	`frame-master init`
Migrate from another framework	`frame-master init`
Start with template	`frame-master create -t`