Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (make-webapp-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

make-webapp CLI

🚀 Enhanced CLI for creating production-ready Next.js applications

Create modern web applications with TypeScript, authentication, database integration, UI components, and advanced theming in minutes, not hours.

✨ Features

🎯 Core Stack

Next.js 14+ with App Router, TypeScript, and ESLint
Tailwind CSS for responsive styling
Prisma ORM with PostgreSQL, MySQL, or SQLite support
shadcn/ui components with customizable selection
src/ directory structure (optional)

🔐 Authentication

BetterAuth - Modern, flexible authentication with OAuth providers
Clerk - Managed authentication service
Multiple OAuth providers: Google, GitHub, Discord, Twitter, Apple
Email/password authentication with proper validation

🎨 Advanced Theming

shadcn/ui theme system with dark/light mode
next-themes for lightweight theming
tailwind-variants for advanced component variants
Custom color palettes and border radius options
Animation controls and system theme detection

🛡️ Robustness & Quality

Comprehensive error handling with retry mechanisms
Input validation for all user inputs
Edge case coverage for network issues, permissions, etc.
Progress tracking with detailed feedback
Graceful fallbacks when operations fail

🚀 Quick Start

Interactive Mode (Recommended)

npx make-webapp my-app

Non-Interactive Mode

npx make-webapp my-app --yes --db postgres --auth better-auth --theme shadcn

📦 Installation

Global Installation

npm install -g make-webapp-cli
# or
pnpm add -g make-webapp-cli

One-time Usage

npx make-webapp-cli my-app
# or
npx create-vd-app my-app

🛠️ Command Line Options

Basic Usage

make-webapp [project-name] [options]

Common Options

Flag	Description	Default
`-h, --help`	Show help message
`-v, --version`	Show version
`-y, --yes`	Skip prompts (non-interactive)	`false`
`--verbose`	Enable verbose logging	`false`

Project Configuration

Flag	Description	Example
`--name <name>`	Project name	`--name my-app`
`--db <type>`	Database type	`--db postgres`
`--database-url <url>`	Database URL	`--database-url postgresql://...`
`--src`	Use src/ directory	`--src`
`--components <list>`	shadcn components	`--components button,card,input`

Authentication Options

Flag	Description	Example
`--auth <provider>`	Auth provider	`--auth better-auth`
`--clerk-pk <key>`	Clerk publishable key	`--clerk-pk pk_test_...`
`--clerk-sk <key>`	Clerk secret key	`--clerk-sk sk_test_...`
`--better-auth-secret <key>`	BetterAuth secret	`--better-auth-secret your-secret`
`--better-auth-providers <list>`	OAuth providers	`--better-auth-providers google,github`

Theme Configuration

Flag	Description	Example
`--theme <provider>`	Theme provider	`--theme shadcn`
`--theme-config <json>`	Theme configuration	See examples below

🎨 Theme Configuration Examples

Corporate Theme

--theme-config '{"defaultTheme":"light","borderRadius":"sm","animations":false}'

Vibrant Theme

--theme-config '{"defaultTheme":"system","borderRadius":"lg","customColors":{"primary":"hsl(262.1 83.3% 57.8%)"}}'

Minimal Theme

--theme-config '{"defaultTheme":"light","enableSystem":false,"animations":false,"borderRadius":"none"}'

📋 Examples

Full-Featured App

npx make-webapp my-saas-app \
  --db postgres \
  --database-url postgresql://user:pass@localhost/db \
  --auth better-auth \
  --better-auth-providers google,github \
  --theme shadcn \
  --components button,card,input,select,dialog,table

Simple Blog

npx make-webapp my-blog \
  --db sqlite \
  --auth none \
  --theme next-themes \
  --components button,card,badge

E-commerce Starter

npx make-webapp my-store \
  --db mysql \
  --auth clerk \
  --theme shadcn \
  --theme-config '{"defaultTheme":"system","borderRadius":"md"}' \
  --components button,card,input,select,dialog,badge,table,form

🔧 Available Components

UI Components (shadcn/ui)

Form & Input: button, input, select, checkbox, radio-group, form, label
Layout: card, sheet, dialog, drawer, separator, tabs
Navigation: navigation-menu, breadcrumb, menubar, dropdown-menu
Feedback: alert, toast, progress, skeleton, badge
Data: table, calendar, command, popover
Media: avatar, aspect-ratio
Advanced: accordion, collapsible, context-menu, hover-card, resizable, scroll-area, slider, switch, toggle, tooltip

🗄️ Database Support

PostgreSQL

--db postgres --database-url postgresql://user:password@localhost:5432/mydb

MySQL

--db mysql --database-url mysql://user:password@localhost:3306/mydb

SQLite (Default)

--db sqlite
# Uses file:./dev.db automatically

🔐 Authentication Providers

BetterAuth (Recommended)

OAuth Providers: Google, GitHub, Discord, Twitter, Apple
Email/Password: Built-in with validation
Database Integration: Works with all supported databases
Modern API: Type-safe with excellent DX

Clerk

Managed Service: No backend required
Social Login: 20+ providers supported
User Management: Built-in dashboard
Production Ready: Enterprise features available

🎯 What You Get

After running the CLI, you'll have a complete Next.js application with:

Project Structure

my-app/
├── src/                    # Source directory (optional)
│   ├── app/               # Next.js App Router
│   ├── components/        # React components
│   │   ├── ui/           # shadcn/ui components
│   │   └── auth/         # Authentication components
│   └── lib/              # Utility functions
├── prisma/               # Database schema
├── public/               # Static assets
└── package.json          # Dependencies and scripts

Ready-to-Use Features

🎨 Responsive navbar with theme toggle and auth
🏠 Landing page with feature cards
🔐 Authentication pages (sign in/up)
🌙 Dark/light mode with system detection
📱 Mobile-responsive design
🗄️ Database models and migrations
🧩 UI components ready to use

🚀 Getting Started

After creating your app:

Navigate to your project
```
cd my-app
```
Start development server
```
pnpm dev
```
Configure authentication (if using)
- Update .env.local with real API keys
- Configure OAuth providers in your dashboard
Customize your app
- Edit app/page.tsx for your landing page
- Add your business logic
- Customize components and styling

📚 Documentation

Next.js: https://nextjs.org/docs
Prisma: https://prisma.io/docs
shadcn/ui: https://ui.shadcn.com
BetterAuth: https://better-auth.com
Clerk: https://clerk.com/docs
Tailwind CSS: https://tailwindcss.com/docs

🆘 Troubleshooting

Common Issues

pnpm not found

npm install -g pnpm
# or enable corepack
corepack enable

Permission denied

sudo chown -R $(whoami) ~/.npm
# or use npx instead of global install

Database connection failed

Verify your database URL format
Ensure database server is running
Check credentials and network connectivity

Component installation failed

Check internet connection
Try installing components individually later
Verify shadcn/ui registry is accessible

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

Next.js - The React framework
shadcn/ui - Beautiful component library
Prisma - Next-generation ORM
BetterAuth - Modern authentication
Tailwind CSS - Utility-first CSS

Made with ❤️ by Vdcds

Happy building! 🚀

From repo root (or after global install):

node dist/index.js

Or if linked globally:

make-webapp

Follow prompts to configure database and (optionally) Clerk.

Dev

pnpm dev

Roadmap

Add test suite
Additional component set selection
Deployment helpers