@orchard9ai/create-vite-vike-tauri
Version:
Create Vite + Vike + Tauri applications with Orchard9 design system
266 lines (193 loc) • 7.05 kB
Markdown
# @orchard9ai/create-vite-vike-tauri
> Create modern Vite + Vike + Tauri applications with Orchard9 design system
[](https://www.npmjs.com/package/@orchard9ai/create-vite-vike-tauri)
[](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