@razerspine/create-app

Create a modern webpack project using production-ready SPA or MPA templates powered by the Razerspine ecosystem.

Table of Contents

• Quick Start
• CLI Usage
• CLI Options
• Package Manager Support
• Project Architectures
• Project Structure
• Template Resolution
• Testing
• How It Works
• Changelog (1.0.0)
• Documentation
• License

Quick Start

npx @razerspine/create-app my-app

or using npm script locally:

npm run create-app -- my-app

CLI Usage

Interactive mode

npx @razerspine/create-app my-app

Prompts:

• App type (SPA / MPA)
• Style (SCSS / Less)
• Script (JS / TS)

Non-interactive mode (CI-friendly)

npx @razerspine/create-app my-app \
  --app-type spa \
  --style scss \
  --script ts \
  --pm pnpm \
  --no-install

⚠️ All feature flags must be provided together.

CLI Options

| Option | Description |
|-----------------------------------|------------------------------| | --app-type spa \| mpa | Application architecture |
| --style scss \| less | CSS preprocessor |
| --script js \| ts | Script language |
| --pm npm \| yarn \| pnpm \| bun | Package manager to use |
| --no-install | Skip dependency installation |
| --dry-run | Do not write files |
| -v, --version | Show CLI version |
| -h, --help | Show help |

Package Manager Support

You can explicitly choose a package manager:

npx @razerspine/create-app my-app --pm pnpm

Supported:

• npm (default)
• pnpm
• yarn
• bun

Features

• Auto script adaptation:
  • npm run build → pnpm build / yarn build
• Adds packageManager field to package.json
• Fallback to npm if not specified

Project Architectures

SPA (Single Page Application)

Powered by:

• @razerspine/runtime

Includes:

• DI container
• Router
• Route guards
• Reactive state
• Component lifecycle

MPA (Multi Page Application)

Features:

• Multi-entry webpack setup
• Independent pages
• Lightweight architecture

Best for:

• landing pages
• marketing sites
• classic websites

Project Structure

Example:

src/
  app/
  pages/
  shared/
  assets/
  styles/

Projects are:

• standalone
• production-ready
• deployable out of the box

Template Resolution

Templates are resolved automatically:

| Type | Style | Script | Template | |------|-------|--------|-----------------| | SPA | SCSS | TS | spa-pug-scss-ts | | SPA | SCSS | JS | spa-pug-scss-js | | SPA | Less | TS | spa-pug-less-ts | | SPA | Less | JS | spa-pug-less-js | | MPA | SCSS | TS | mpa-pug-scss-ts | | MPA | SCSS | JS | mpa-pug-scss-js | | MPA | Less | TS | mpa-pug-less-ts | | MPA | Less | JS | mpa-pug-less-js |

Testing

Includes:

• ✅ E2E tests (CLI behavior)
• ✅ Integration tests (pipeline, installer)
• ✅ Unit tests (utils, steps, CLI)

Highlights:

• Real CLI execution via tsx
• Temp directories per test
• Automatic cleanup
• Exit code validation
• Timeout protection

How It Works

Pipeline-based architecture:

resolve template
  ↓
prepare directory
  ↓
copy files
  ↓
patch package.json
  ↓
install dependencies

Changelog (1.0.0)

Major Release

• Full CLI rewrite
• New package: @razerspine/create-app
• New command: create

⚠️ Breaking Changes

• create-webpack-starter → create-app
• New binary: dist/index.cjs
• Switched to tsup
• Removed direct package.json imports

Features

• Interactive CLI (inquirer)
• Smart template resolution
• Dry-run mode
• Improved validation

Package Manager Support

• Added --pm flag
• Supports: npm, pnpm, yarn, bun
• Script auto-adaptation
• Injects packageManager field

Testing

• Vitest migration
• Full E2E coverage
• Fixed cleanup race conditions

Architecture

• Pipeline-based system
• Clean separation:
  • CLI
  • core
  • steps
  • utils

DX Improvements

• tsx instead of ts-node
• Better logs (ora + kleur)
• Improved CLI UX

Documentation

Detailed documentation is available in the /docs directory:

• Getting Started
• Templates
• SPA Examples
• MPA Examples
• Build System
• Runtime Engine
• FAQ
• Testing

License

ISC License