create-hauis-app

# create-hauis-app <img src="https://img.shields.io/npm/v/create-hauis?style=flat-square" alt="npm version" /> <img src="https://img.shields.io/npm/dm/create-hauis-app?style=flat-square" alt="npm downloads" /> <img src="https://img.shields.io/github/license/jacobgh00/create-hauis-app?style=flat-square" alt="license" /> <img src="https://img.shields.io/node/v/create-hauis-app?style=flat-square" alt="node version" /> A modern, extensible CLI wizard for scaffolding frontend projects with the latest tools and best practices. <a href="#-features">Features</a> • <a href="#-quick-start">Quick Start</a> • <a href="#-documentation">Documentation</a> • <a href="#-frameworks">Frameworks</a> • <a href="#-contributing">Contributing</a> <img src="https://raw.githubusercontent.com/yourusername/create-frontend-app/main/demo.gif" alt="CLI Demo" width="600" /> ## ✨ Features - 🎯 **Multiple Frameworks** - React, Vue, Svelte, Astro, Vanilla JS - 🏗️ **Meta Frameworks** - Next.js 15, Remix, SvelteKit 2, Nuxt 3 - 📘 **TypeScript First** - First-class TypeScript support with strict defaults - 🎨 **Tailwind CSS v4** - Latest version with CSS variables and `@theme` directive - 📦 **All Package Managers** - npm, pnpm, yarn, bun - 🔧 **Code Quality Tools** - Biome (fast) or ESLint + Prettier - 🪝 **Git Hooks** - Lefthook with conventional commits - 🎛️ **Flexible CLI** - Interactive prompts or command-line flags - 📋 **Preset System** - Quick start with predefined configurations - 🔄 **Dry Run Mode** - Preview changes without creating files ## 🚀 Quick Start ```bash # Recommended: Interactive mode npx create-hauis-app@latest # With project name npx create-hauis-app@latest my-app # Using preset npx create-hauis-app@latest my-app --preset next-app ``` Or install globally: ```bash npm install -g create-hauis-app create-hauis-app ``` ## 📖 Documentation ### Interactive Mode Simply run the command and follow the prompts: ```bash npx create-frontend-app@latest ``` You'll be asked about: 1. **Project name** - Name of your new project 2. **Framework** - React, Vue, Svelte, Astro, or Vanilla JS 3. **Meta framework** - Next.js, Remix, SvelteKit, Nuxt (if applicable) 4. **TypeScript** - Enable TypeScript (recommended) 5. **Tailwind CSS** - Add Tailwind CSS v4 6. **Package manager** - npm, pnpm, yarn, or bun 7. **Code quality** - Biome or ESLint + Prettier 8. **Git hooks** - Add Lefthook for automated checks ### Command Line Mode Skip prompts by providing options: ```bash npx create-frontend-app@latest my-app \ --framework react \ --meta next \ --typescript \ --tailwind \ --pm pnpm \ --quality biome \ --git-hooks ``` ### CLI Options | Option | Alias | Description | |--------|-------|-------------| | `--framework <type>` | `-f` | Frontend framework (`react`, `vue`, `svelte`, `astro`, `vanilla`) | | `--meta <type>` | `-m` | Meta framework (`next`, `remix`, `sveltekit`, `nuxt`) | | `--typescript` | `--ts` | Use TypeScript | | `--no-typescript` | `--no-ts` | Use JavaScript | | `--tailwind` | | Add Tailwind CSS v4 | | `--no-tailwind` | | Skip Tailwind CSS | | `--pm <manager>` | | Package manager (`npm`, `pnpm`, `yarn`, `bun`) | | `--quality <tool>` | | Code quality (`biome`, `eslint-prettier`) | | `--git-hooks` | | Add Lefthook for Git hooks | | `--preset <name>` | `-p` | Use a preset configuration | | `--dry-run` | | Preview without creating files | | `--debug` | `-d` | Enable debug mode | ## 📋 Presets Quick configurations for common setups: ### Available Presets | Preset | Description | |--------|-------------| | `next-app` | Next.js with TypeScript, Tailwind CSS v4, and Biome | | `vue-minimal` | Vue with JavaScript and ESLint | | `svelte-kit` | SvelteKit with TypeScript and Biome | | `astro-blog` | Astro with TypeScript and Tailwind | | `react-vite` | React with Vite, TypeScript, and Biome | | `enterprise-next` | Next.js with all features for enterprise projects | ### Using Presets ```bash # Next.js app with TypeScript and Tailwind npx create-hauis-app@latest my-app --preset next-app # List all available presets npx create-hauis-app@latest list-presets ``` ## 🏗️ Frameworks ### React Ecosystem <details> <summary>React (Vite) - Lightning fast React development</summary> ```bash npx create-hauis-app@latest my-app --framework react ``` - ⚡ Vite for fast HMR - 📘 TypeScript ready - 🎨 Optional Tailwind CSS v4 - 🔧 Biome or ESLint + Prettier </details> <details> <summary>Next.js 15 - Full-stack React framework</summary> ```bash npx create-hauis-app@latest my-app --framework react --meta next ``` - 📁 App Router - 🚀 Server Components - 🎨 Tailwind CSS v4 support - 📘 TypeScript by default - 🔧 Optimized for production </details> <details> <summary>Remix - Full-stack web framework</summary> ```bash npx create-hauis-app@latest my-app --framework react --meta remix ``` - 🚀 Nested routing - 📊 Built-in data loading - 🎯 Progressive enhancement - 🔧 Full-stack TypeScript </details> ### Vue Ecosystem <details> <summary>Vue 3 (Vite) - Progressive JavaScript framework</summary> ```bash npx create-hauis-app@latest my-app --framework vue ``` - ⚡ Composition API - 📘 TypeScript support - 🏪 Pinia state management - 🛣️ Vue Router </details> <details> <summary>Nuxt 3 - Full-stack Vue framework</summary> ```bash npx create-hauis-app@latest my-app --framework vue --meta nuxt ``` - 🚀 Nitro server engine - 📁 File-based routing - 🔌 Auto-imports - 🎯 SEO optimized </details> ### Other Frameworks <details> <summary>SvelteKit 2 - Full-stack Svelte framework</summary> ```bash npx create-hauis-app@latest my-app --framework svelte --meta sveltekit ``` - 🚀 Server-side rendering - 📁 File-based routing - 📘 TypeScript support - ⚡ Vite powered </details> <details> <summary>Astro - Content-focused framework</summary> ```bash npx create-hauis-app@latest my-app --framework astro ``` - 🏝️ Island architecture - 🚀 Zero JS by default - 📝 MDX support ready - 🎨 Tailwind CSS v4 compatible </details> ## 🎨 Tailwind CSS v4 When Tailwind CSS is selected, you get a modern v4 setup: ```css @import 'tailwindcss'; @theme { /* Modern design tokens */ --font-sans: system-ui, -apple-system, ...; --color-primary-500: #3b82f6; --spacing-lg: 1.5rem; --radius-md: 0.375rem; } /* Custom utilities */ @layer utilities { .gradient-text { @apply bg-gradient-to-r from-primary-600 to-accent; @apply bg-clip-text text-transparent; } } ``` Features: - ✨ CSS variables for complete customization - 🌙 Automatic dark mode support - 📐 Modern `@theme` directive - 🚀 No `tailwind.config.js` needed - 🎯 Optimized PostCSS setup ## 📦 Package Managers Full support for all major package managers: ```bash # npm (default) npx create-hauis-app@latest my-app --pm npm # pnpm (recommended) npx create-hauis-app@latest my-app --pm pnpm # Yarn npx create-hauis-app@latest my-app --pm yarn # Bun npx create-hauis-app@latest my-app --pm bun ``` ## 🔧 Code Quality Tools ### Biome (Recommended) Fast, all-in-one toolchain: ```bash npx create-hauis-app@latest my-app --quality biome ``` - ⚡ 10-20x faster than ESLint + Prettier - 🔧 Linter and formatter in one - 📘 Great TypeScript support - 🎯 Minimal configuration ### ESLint + Prettier Traditional setup: ```bash npx create-hauis-app@latest my-app --quality eslint-prettier ``` - 🔍 Comprehensive linting rules - 🎨 Prettier formatting - 🔌 Framework-specific plugins - 🛠️ Highly customizable ## 🪝 Git Hooks with Lefthook Automated code quality checks: ```bash npx create-hauis-app@latest my-app --git-hooks ``` Includes: - 🔍 Pre-commit: Lint and format staged files - 📝 Commit-msg: Enforce conventional commits - 🔄 Post-merge: Auto-install dependencies ## 📁 Generated Project Structure ``` my-app/ ├── src/ # Source files ├── public/ # Static assets ├── package.json # Dependencies and scripts ├── tsconfig.json # TypeScript config (if selected) ├── globals.css # Tailwind CSS v4 (if selected) ├── postcss.config.js # PostCSS config ├── biome.json # Biome config (or ESLint/Prettier) ├── lefthook.yml # Git hooks (if selected) └── .gitignore # Git ignore rules ``` ## 🛠️ Available Scripts Based on your selections: ```bash # Development npm run dev # Start dev server # Build npm run build # Build for production # Code Quality (Biome) npm run check # Lint and check formatting npm run check:format # Fix all issues # Code Quality (ESLint + Prettier) npm run lint # Run ESLint npm run format # Format with Prettier # Type Checking npm run typecheck # Run TypeScript compiler ``` ## 📚 Examples ### Next.js Enterprise Setup ```bash npx create-hauis-app@latest my-enterprise-app \ --preset enterprise-next ``` ### Vue 3 with Nuxt ```bash npx create-hauis-app@latest my-vue-app \ --framework vue \ --meta nuxt \ --typescript \ --tailwind ``` ### Minimal Astro Blog ```bash npx create-hauis-app@latest my-blog \ --framework astro \ --typescript \ --tailwind \ --pm bun ``` ### React SPA with Vite ```bash npx create-hauis-app@latest my-spa \ --framework react \ --typescript \ --quality eslint-prettier ``` ## 🤝 Contributing We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for details. ```bash # Install dependencies pnpm install # Run in development pnpm dev # Run tests pnpm test ``` ## 📄 License MIT © [Jacob H] ## 🙏 Acknowledgments Built with inspiration from: - create-react-app - create-next-app - create-vite - create-t3-app --- Made with ❤️ by developers, for developers <a href="https://github.com/jacobgh00/create-hauis-app">GitHub</a> • <a href="https://www.npmjs.com/package/create-hauis-app">npm</a> • <a href="https://create-hauis-app.dev">Documentation</a> •