build-tooling

Build Tooling Skill

Purpose

This skill covers Bun runtime, build tooling, TypeScript compilation, and development workflows in the create-legal-app starter kit.

Key Concepts

• Bun: Fast all-in-one JavaScript runtime, bundler, and package manager
• TypeScript: Type-safe JavaScript with static type checking
• Next.js Build: Production build optimization
• Development Server: Hot module replacement and fast refresh

Bun Runtime

Why Bun?

Bun is significantly faster than Node.js and npm:

• 3x faster package installation
• Built-in TypeScript support - no ts-node needed
• Native bundler - no webpack/rollup configuration
• Fast module resolution and execution
• Drop-in replacement for Node.js

Bun Commands

# Package management
bun install                  # Install dependencies
bun add [package]           # Add package
bun add -D [package]        # Add dev dependency
bun remove [package]        # Remove package
bun update                  # Update all packages

# Running scripts
bun run dev                 # Run development server
bun run build               # Build for production
bun run start               # Start production server
bun run lint                # Run ESLint

# Direct execution
bun index.ts                # Run TypeScript directly
bunx [package]              # Run package without installing

package.json Scripts

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:push": "drizzle-kit push",
    "db:studio": "drizzle-kit studio"
  }
}

TypeScript

Configuration

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}