JSPM

  • Created
  • Published
  • Downloads 119
  • Score
    100M100P100Q73102F
  • License MIT

CLI tool to scaffold modern web applications with your chosen stack

Package Exports

  • create-precast-app
  • create-precast-app/package.json

Readme

Create Precast App - Modern CLI Architecture

A powerful, extensible CLI for scaffolding modern web applications with a template-based architecture.

โœจ Features

  • ๐ŸŽฏ Template-Based Generation - Handlebars templates for maintainable code generation
  • ๐Ÿ”Œ Plugin System - Extensible architecture with lifecycle hooks
  • โœ… Smart Validation - Configuration compatibility checking with helpful errors
  • ๐ŸŽจ Beautiful CLI - Modern prompts with progress indicators
  • ๐Ÿณ Docker Support - Optional containerization for databases and apps
  • ๐Ÿงช Comprehensive Testing - Test suite for all configuration combinations

๐Ÿš€ Quick Start

# Interactive mode
npx create-precast-app

# With options
npx create-precast-app my-app --framework react --backend express --database postgres

# Skip all prompts
npx create-precast-app my-app -y

๐Ÿ“‹ Available Options

Frameworks

  • react - React with Vite
  • vue - Vue 3 (coming soon)
  • angular - Angular (coming soon)
  • next - Next.js (coming soon)
  • nuxt - Nuxt 3 (coming soon)
  • svelte - SvelteKit (coming soon)
  • solid - SolidJS (coming soon)
  • astro - Astro (coming soon)

Backends

  • express - Express.js server
  • fastify - Fastify server
  • hono - Hono server
  • none - Frontend only

Databases

  • postgres - PostgreSQL
  • mysql - MySQL
  • mongodb - MongoDB
  • sqlite - SQLite
  • supabase - Supabase
  • firebase - Firebase
  • none - No database

ORMs

  • prisma - Prisma ORM (SQL databases + MongoDB)
  • drizzle - Drizzle ORM (SQL databases)
  • mongoose - Mongoose (MongoDB only)
  • none - No ORM

Styling

  • tailwind - Tailwind CSS
  • css - Plain CSS
  • scss - SCSS/Sass
  • styled-components - Styled Components

Additional Options

  • --typescript / --no-typescript - TypeScript support (default: true)
  • --git / --no-git - Initialize git repository (default: true)
  • --docker - Include Docker configuration
  • --install - Install dependencies after creation
  • --pm <manager> - Package manager (npm, yarn, pnpm, bun)

๐Ÿ” Security Features

  • Automatic vulnerability scanning - Runs security audits after dependency installation
  • Auto-fix vulnerabilities - Attempts to fix security issues automatically
  • Secure dependency versions - All templates use the latest secure versions
  • esbuild vulnerability mitigation - Automatic overrides for CVE-2024-23334
  • Weekly dependency updates - Automated PRs for security updates
  • Build-time security checks - Security audit runs during build process

See SECURITY.md for more details.

๐Ÿ—๏ธ Architecture

packages/cli/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ core/                    # Core systems
โ”‚   โ”‚   โ”œโ”€โ”€ template-engine.ts   # Handlebars template processor
โ”‚   โ”‚   โ”œโ”€โ”€ plugin-manager.ts    # Plugin lifecycle management
โ”‚   โ”‚   โ””โ”€โ”€ config-validator.ts  # Configuration validation
โ”‚   โ”œโ”€โ”€ templates/               # Template files
โ”‚   โ”‚   โ”œโ”€โ”€ frameworks/          # Framework-specific templates
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ react/          # React templates
โ”‚   โ”‚   โ”œโ”€โ”€ features/           # Feature templates
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ auth/          # Authentication
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ testing/       # Testing setup
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ database/      # Database configs
โ”‚   โ”‚   โ””โ”€โ”€ base/              # Common templates
โ”‚   โ”œโ”€โ”€ generators/             # Template generators
โ”‚   โ”œโ”€โ”€ commands/               # CLI commands
โ”‚   โ””โ”€โ”€ plugins/                # Built-in plugins

๐Ÿ—„๏ธ Database Configuration

How It Works

When you select a database, the CLI:

  1. Validates ORM compatibility
  2. Generates connection configuration in .env.example
  3. Adds required dependencies
  4. Creates configuration files (Prisma schema, Drizzle config, etc.)
  5. Sets up Docker Compose (if Docker enabled)

PostgreSQL Example

When you select PostgreSQL with Prisma:

Generated .env.example:

DATABASE_URL=postgresql://postgres:postgres@localhost:5432/myapp

Generated docker-compose.yml:

services:
  postgres:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: myapp
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

Generated Scripts in package.json:

{
  "scripts": {
    "db:generate": "prisma generate",
    "db:migrate": "prisma migrate dev",
    "db:push": "prisma db push",
    "db:studio": "prisma studio"
  }
}

Setting Up Your Database

  1. Using Docker (Recommended):

    # Start database
    docker-compose up -d
    
    # Run migrations
    npm run db:migrate
  2. Using Local Database:

    • Install PostgreSQL/MySQL/MongoDB
    • Update DATABASE_URL in .env
    • Run migrations

๐Ÿงช Testing

Running Tests

# Build the CLI
npm run build

# Run all tests
npm test

# Run specific test
npm test -- --grep "PostgreSQL"

Test Coverage

The test suite covers:

  • โœ… All framework combinations
  • โœ… All database + ORM combinations
  • โœ… TypeScript/JavaScript generation
  • โœ… All styling options
  • โœ… Docker configuration
  • โœ… Git initialization
  • โœ… Validation rules

๐Ÿ”ง Extending the CLI

See EXPANSION-GUIDE.md for detailed instructions on:

  • Adding new frameworks
  • Creating feature templates
  • Writing plugins
  • Testing new options

Quick Example: Adding a Feature

  1. Create template structure:

    src/templates/features/auth/
    โ”œโ”€โ”€ react/
    โ”‚   โ”œโ”€โ”€ src/
    โ”‚   โ”‚   โ”œโ”€โ”€ components/
    โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ LoginForm.tsx.hbs
    โ”‚   โ”‚   โ””โ”€โ”€ hooks/
    โ”‚   โ”‚       โ””โ”€โ”€ useAuth.ts.hbs
    โ”‚   โ””โ”€โ”€ package.json.hbs
  2. Update generator to use templates:

    await templateEngine.processConditionalTemplates([
      {
        condition: config.auth === true,
        sourceDir: "features/auth/react",
        destDir: "src",
      }
    ], projectPath, config);

๐Ÿ“š Template System

Handlebars Helpers

{{#if typescript}}
  // TypeScript code
{{else}}
  // JavaScript code
{{/if}}

{{#if (eq database "postgres")}}
  DATABASE_URL=postgresql://...
{{/if}}

{{#ifAny (eq backend "express") (eq backend "fastify")}}
  // Server code
{{/ifAny}}

Available Helpers

  • eq - Equality check
  • and, or, not - Logical operators
  • includes - Array includes
  • ifAny, ifAll - Multiple conditions
  • capitalize - Capitalize string
  • kebabCase - Convert to kebab-case

๐Ÿค Contributing

  1. Fork the repository
  2. Create your feature branch
  3. Add tests for new features
  4. Ensure all tests pass
  5. Submit a pull request

๐Ÿ“ License

MIT


Comparison with Original

Old Approach (String-based)

function generatePackageJson(config) {
  return JSON.stringify({
    name: config.name,
    dependencies: {
      react: "^18.2.0",
      ...(config.styling === "tailwind" && {
        tailwindcss: "^3.0.0"
      })
    }
  }, null, 2);
}

New Approach (Template-based)

{
  "name": "{{name}}",
  "dependencies": {
    "react": "^18.3.1"
    {{#if (eq styling "tailwind")}}
    ,"tailwindcss": "^3.4.0"
    {{/if}}
  }
}

Benefits

  • โœ… Easier to maintain
  • โœ… Version control friendly
  • โœ… No string escaping issues
  • โœ… Better IDE support
  • โœ… Reusable templates