# @orchard9ai/create-vite-vike-tauri

> Create modern Vite + Vike + Tauri applications with Orchard9 design system

[![npm version](https://img.shields.io/npm/v/@orchard9ai/create-vite-vike-tauri.svg)](https://www.npmjs.com/package/@orchard9ai/create-vite-vike-tauri)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## 🚀 Quick Start

Create a new Tauri application with a single command:

```bash
npx @orchard9ai/create-vite-vike-tauri@latest
```

Or with a project name:

```bash
npx @orchard9ai/create-vite-vike-tauri my-app
```

## 📋 Prerequisites

Before using this generator, ensure you have:

- **Node.js** 18.0.0 or higher
- **pnpm** (will be installed automatically if missing)
- **Rust** 1.82.0 or higher (for Tauri)
- **Platform Tools** (optional):
  - **macOS**: Xcode for iOS development
  - **All platforms**: Android Studio for Android development

## 🎯 Features

- ⚡ **Vite** - Lightning fast build tool
- 🚀 **Vike** - Flexible SSR framework with multi-page routing and error pages
- 🦀 **Tauri 2.0** - Build smaller, faster, more secure apps
- 🎨 **Orchard9 Design System** - Pre-configured Grove themes with theme switching
- 🎯 **TypeScript** - Type-safe by default
- 🎨 **TailwindCSS v4** - Modern CSS framework with DaisyUI-style utilities
- 📱 **Mobile Support** - iOS and Android (optional)
- 🧪 **Testing Setup** - Vitest pre-configured
- ♿ **Accessibility** - Focus states, skip navigation, ARIA compliance
- 🔍 **SEO Ready** - Interactive SEO setup with meta tags, Open Graph, Twitter Cards
- 🔧 **Best Practices** - ESLint, Prettier, Husky

## 🛠️ Options

### Interactive Mode

Simply run the command and follow the prompts:

```bash
npx @orchard9ai/create-vite-vike-tauri
```

### Command Line Options

```bash
npx @orchard9ai/create-vite-vike-tauri my-app [options]

Options:
  --vike              Add Vike SSR support
  --mobile            Add iOS/Android support
  --skip-install      Skip dependency installation
  --skip-git          Skip git initialization
  --dry-run           Preview without creating files
  --pnpm              Use pnpm (default)
  --npm               Use npm
  --yarn              Use yarn
  -h, --help          Display help
  -V, --version       Display version
```

## 📁 Generated Project Structure

```
my-app/
├── src/                    # Application source code
│   ├── components/         # React components
│   │   ├── SplashScreen.tsx    # Loading splash screen
│   │   ├── WelcomeScreen.tsx   # Welcome screen
│   │   └── Navigation.tsx      # Main navigation (if Vike)
│   ├── hooks/              # Custom React hooks
│   ├── pages/              # Page components (if Vike)
│   │   ├── +Layout.tsx         # Root layout with theme provider
│   │   ├── index/              # Landing page
│   │   ├── about/              # About page
│   │   └── terms/              # Terms page
│   ├── stores/             # State management (Zustand)
│   ├── styles/             # Global styles
│   ├── utils/              # Utility functions
│   ├── App.tsx             # Main app component
│   └── main.tsx            # Application entry point
├── src-tauri/              # Tauri backend (Rust)
│   ├── src/                # Rust source code
│   ├── capabilities/       # Tauri permissions
│   ├── icons/              # App icons
│   ├── Cargo.toml          # Rust dependencies
│   └── tauri.conf.json     # Tauri configuration
├── public/                 # Static assets
├── index.html              # HTML entry point
├── package.json            # Node.js dependencies
├── tsconfig.json           # TypeScript config
├── vite.config.ts          # Vite configuration
├── tailwind.config.js      # TailwindCSS config
├── .gitignore              # Git ignore rules
└── README.md               # Project documentation
```

## 🏃 Development Workflow

After creating your project:

```bash
# Navigate to project
cd my-app

# Start development server
pnpm tauri:dev

# Run tests
pnpm test

# Build for production
pnpm tauri:build
```

### Mobile Development

If you added mobile support:

```bash
# iOS development (macOS only)
pnpm tauri:ios dev

# Android development
pnpm tauri:android dev
```

## 🎨 Included Features

### Orchard9 Design System

- Pre-configured Grove Light/Dark themes with automatic persistence
- Theme switching with onThemeChange callbacks
- TailwindCSS v4 with DaisyUI-style utilities
- Comprehensive accessibility with focus-visible states
- Loading state patterns and splash screen
- Skip navigation for screen readers

### SEO & Performance

- Interactive SEO configuration during project setup
- Page-specific meta tags for title and description
- Open Graph tags for social media sharing
- Twitter Card support for Twitter sharing
- Structured favicon and theme color setup
- Custom error pages (404 and application errors)
- Search engine optimization with robots meta tags

### Development Tools

- **TypeScript** - Full type safety
- **Vitest** - Fast unit testing
- **ESLint** - Code linting
- **Prettier** - Code formatting
- **Husky** - Git hooks

### Tauri Features

- Secure CSP configuration
- Shell plugin for system operations
- Logging utilities
- Platform detection
- Hot module replacement

## 🔧 Configuration

### Environment Variables

Create a `.env` file for configuration:

```env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Tauri App
```

### Tauri Configuration

Edit `src-tauri/tauri.conf.json` for:

- Window settings
- Security policies
- Bundle configuration
- App metadata

## 🐛 Troubleshooting

### Common Issues

1. **Rust not found**

   ```bash
   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   ```

2. **Node version too old**

   ```bash
   # Install Node 18+ via nvm
   nvm install 18
   nvm use 18
   ```

3. **Mobile build fails**
   - iOS: Ensure Xcode is installed and updated
   - Android: Set `ANDROID_HOME` environment variable

### Debug Mode

Run with debug output:

```bash
DEBUG=* npx @orchard9ai/create-vite-vike-tauri my-app
```

## 📚 Examples

### Basic Desktop App

```bash
npx @orchard9ai/create-vite-vike-tauri desktop-app
```

### SSR-Enabled App

```bash
npx @orchard9ai/create-vite-vike-tauri ssr-app --vike
```

### Full-Featured Mobile App

```bash
npx @orchard9ai/create-vite-vike-tauri mobile-app --vike --mobile
```

## 🤝 Contributing

Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details.

## 📄 License

MIT © Orchard9

## 🔗 Links

- [Tauri Documentation](https://tauri.app/)
- [Vike Documentation](https://vike.dev/)
- [Vite Documentation](https://vitejs.dev/)
- [Orchard9 Design System](https://github.com/orchard9ai/design-system)

---

Built with ❤️ by the Orchard9 team