--- name: bun-init description: Initialize a new Bun project with TypeScript and optimal configuration. Use when starting a new Bun project or converting a directory to a Bun project. compatibility: Requires Bun 1.0+ allowed-tools: ["Bash", "Write", "Read"] metadata: author: dale category: bun-runtime tags: [bun, javascript, typescript, initialization, setup] --- # Bun Project Initialization You are assisting with initializing a new Bun project. Follow these steps to create a well-structured project with optimal configurations. ## Workflow ### 1. Check Prerequisites First, verify Bun is installed: ```bash bun --version ``` If Bun is not installed, provide installation instructions for the user's platform. ### 2. Determine Project Type Ask the user which type of project they want to create: - **CLI Tool**: Command-line application with bin entry point - **Web App**: Frontend application with React/Vue/etc - **API Server**: Backend API with routing framework - **Library**: Reusable package for publishing to npm ### 3. Run Bun Init Execute the initialization command: ```bash bun init -y ``` This creates: - `package.json` with Bun-optimized scripts - `tsconfig.json` with recommended TypeScript settings - `index.ts` as the entry point - `README.md` with basic project info ### 4. Enhance TypeScript Configuration Read the generated `tsconfig.json` and enhance it based on project type: **For CLI Tools:** ```json { "compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", "types": ["bun-types"], "strict": true, "esModuleInterop": true, "skipLibCheck": true, "resolveJsonModule": true, "allowImportingTsExtensions": true, "noEmit": true } } ``` **For Web Apps:** ```json { "compilerOptions": { "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "react-jsx", "types": ["bun-types"], "strict": true, "esModuleInterop": true, "skipLibCheck": true, "resolveJsonModule": true, "allowImportingTsExtensions": true, "noEmit": true } } ``` **For API Servers:** ```json { "compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", "types": ["bun-types"], "strict": true, "esModuleInterop": true, "skipLibCheck": true, "resolveJsonModule": true, "allowImportingTsExtensions": true, "noEmit": true, "paths": { "@/*": ["./src/*"] } } } ``` **For Libraries:** ```json { "compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", "types": ["bun-types"], "strict": true, "declaration": true, "declarationMap": true, "esModuleInterop": true, "skipLibCheck": true, "resolveJsonModule": true, "allowImportingTsExtensions": true, "noEmit": true } } ``` ### 5. Create Project Structure Generate appropriate directory structure and files: **CLI Tool:** ``` project/ ├── src/ │ ├── index.ts # Main CLI entry point │ ├── commands/ # Command handlers │ └── utils/ # Shared utilities ├── tests/ │ └── index.test.ts ├── package.json ├── tsconfig.json ├── .gitignore ├── .env.example └── README.md ``` Create `src/index.ts`: ```typescript #!/usr/bin/env bun console.log("Hello from Bun CLI!"); // Example: Parse command line arguments const args = process.argv.slice(2); console.log("Arguments:", args); ``` Update `package.json` to add bin field: ```json { "bin": { "your-cli-name": "./src/index.ts" } } ``` **Web App:** ``` project/ ├── src/ │ ├── index.tsx # App entry point │ ├── components/ # React components │ ├── styles/ # CSS/styles │ └── utils/ # Utilities ├── public/ │ └── index.html ├── tests/ ├── package.json ├── tsconfig.json ├── .gitignore ├── .env.example └── README.md ``` **API Server:** ``` project/ ├── src/ │ ├── index.ts # Server entry point │ ├── routes/ # Route handlers │ ├── middleware/ # Express/Hono middleware │ ├── services/ # Business logic │ └── types/ # TypeScript types ├── tests/ ├── package.json ├── tsconfig.json ├── .gitignore ├── .env.example └── README.md ``` Create `src/index.ts`: ```typescript const server = Bun.serve({ port: 3000, fetch(request) { return new Response("Welcome to Bun!"); }, }); console.log(`Server running at http://localhost:${server.port}`); ``` **Library:** ``` project/ ├── src/ │ ├── index.ts # Main export │ └── types.ts # Type definitions ├── tests/ ├── package.json ├── tsconfig.json ├── .gitignore └── README.md ``` ### 6. Create .gitignore Generate a comprehensive `.gitignore`: ```gitignore # Bun node_modules bun.lockb *.bun # Environment .env .env.local .env.*.local # Build outputs dist/ build/ *.tsbuildinfo # Logs logs *.log npm-debug.log* # OS .DS_Store Thumbs.db # IDE .vscode/ .idea/ *.swp *.swo *~ # Test coverage coverage/ .nyc_output/ ``` ### 7. Create Environment Template Create `.env.example`: ```bash # Application NODE_ENV=development PORT=3000 # Add your environment variables here # DATABASE_URL= # API_KEY= ``` ### 8. Update package.json Scripts Add project-type-specific scripts: **CLI Tool:** ```json { "scripts": { "dev": "bun run src/index.ts", "test": "bun test", "lint": "bun run --bun eslint src", "typecheck": "bun run --bun tsc --noEmit" } } ``` **Web App:** ```json { "scripts": { "dev": "bun run --hot src/index.tsx", "build": "bun build src/index.tsx --outdir=dist --minify", "test": "bun test", "typecheck": "bun run --bun tsc --noEmit" } } ``` **API Server:** ```json { "scripts": { "dev": "bun run --hot src/index.ts", "start": "bun run src/index.ts", "test": "bun test", "typecheck": "bun run --bun tsc --noEmit" } } ``` **Library:** ```json { "scripts": { "build": "bun build src/index.ts --outdir=dist --minify --sourcemap=external", "test": "bun test", "typecheck": "bun run --bun tsc --noEmit", "prepublishOnly": "bun run build && bun test" } } ``` ### 9. Install Common Dependencies Suggest installing common dependencies based on project type: **CLI Tool:** ```bash bun add commander chalk ora bun add -d @types/node ``` **Web App:** ```bash bun add react react-dom bun add -d @types/react @types/react-dom ``` **API Server:** ```bash bun add hono bun add -d @types/node ``` **Library:** ```bash # No default dependencies - user will add as needed ``` ### 10. Create Initial Test File Create a basic test file in `tests/`: ```typescript import { describe, expect, test } from "bun:test"; describe("Initial test", () => { test("basic assertion", () => { expect(1 + 1).toBe(2); }); }); ``` ## Post-Initialization Checklist After completing the setup, provide the user with: 1. ✅ Confirmation of project type created 2. ✅ List of generated files and directories 3. ✅ Next steps: - Copy `.env.example` to `.env` and configure - Run `bun install` if dependencies were suggested - Run `bun dev` to start development - Run `bun test` to verify tests work ## Key Configuration Principles - **Module Resolution**: Use `"moduleResolution": "bundler"` for Bun's native resolution - **TypeScript Types**: Always include `"types": ["bun-types"]` - **No Emit**: Set `"noEmit": true` since Bun runs TypeScript directly - **Import Extensions**: Enable `"allowImportingTsExtensions": true` for `.ts` imports - **Strict Mode**: Enable strict TypeScript checks for better code quality ## Common Adjustments **If user wants workspaces (monorepo):** Add to `package.json`: ```json { "workspaces": ["packages/*"] } ``` **If user wants path aliases:** Add to `tsconfig.json`: ```json { "compilerOptions": { "paths": { "@/*": ["./src/*"], "@components/*": ["./src/components/*"] } } } ``` **If user wants JSX without React:** Update `tsconfig.json`: ```json { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" // or other JSX runtime } } ``` ## Completion Once all files are created, inform the user that initialization is complete and provide a summary of: - Project structure - Available npm scripts - Recommended next steps - Links to Bun documentation for their project type