create-vite-pp

# create-vite-pp 🚀 > **Lightning-fast React + Vite + Tailwind CSS project generator** A powerful CLI tool that scaffolds a complete React project with Vite and Tailwind CSS in under 30 seconds. No more repetitive setup - just answer 2 questions and start coding! [![npm version](https://badge.fury.io/js/create-vite-pp.svg)](https://badge.fury.io/js/create-vite-pp) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Node.js Version](https://img.shields.io/badge/node-%3E%3D14.0.0-brightgreen)](https://nodejs.org/) ## ✨ Features - 🚀 **Ultra Fast Setup** - Complete project in 30 seconds - 🔍 **Smart Validation** - Prerequisites check & name validation - 🎯 **Interactive CLI** - User-friendly prompts with validation - ⚡ **Latest Tech Stack** - Vite, React 18, TailwindCSS v3.4+ - 📝 **Language Choice** - JavaScript or TypeScript support - 🎨 **Zero Configuration** - Perfect configs out of the box - 🧹 **Clean Boilerplate** - No unnecessary code cluttering - 📚 **Auto Documentation** - Comprehensive README generation - 🛡️ **Error Handling** - Graceful failures with helpful messages - 🔄 **Latest Dependencies** - Always uses current versions ## 🚀 Quick Start ```bash # Using npx (recommended) npx create-vite-pp # Or install globally npm install -g create-vite-pp create-vite-pp ``` ## 📋 Requirements - **Node.js** ≥ 14.0.0 - **npm** ≥ 6.0.0 _The CLI automatically checks these prerequisites before starting._ ## 🎯 Usage ### Interactive Mode Simply run the command and follow the prompts: ```bash $ npx create-vite-pp ================================================== 🚀 React + Vite + Tailwind Setup ================================================== ? Enter your project name: › my-awesome-app ? Select language: › ❯ JavaScript TypeScript ✓ Prerequisites check passed ⏳ Creating Vite project... ✓ Vite project created successfully ⏳ Installing dependencies... ✓ Dependencies installed successfully ⏳ Setting up Tailwind CSS... ✓ Tailwind CSS setup completed ⏳ Updating App component... ✓ App component updated ⏳ Creating README... ✓ README created ================================================== 🎉 Setup Complete! ================================================== Next steps: 1. cd my-awesome-app 2. npm run dev 3. Open http://localhost:5173 ✓ Your React + Vite + Tailwind project is ready! ``` --- ### Project Structure The CLI creates a well-organized project structure: ``` my-awesome-app/ ├── public/ # Static assets ├── src/ │ ├── assets/ # Images, icons, etc. │ ├── App.jsx (or .tsx) # Main App component │ ├── App.css # Component styles │ ├── index.css # Global styles (Tailwind imports) │ └── main.js (or .ts) # Application entry point ├── index.html # HTML template ├── package.json # Dependencies and scripts ├── tailwind.config.js # Tailwind configuration ├── postcss.config.js # PostCSS configuration ├── vite.config.js # Vite configuration └── README.md # Project documentation ``` ## 🛠️ What Gets Installed ### Core Dependencies - **React** ^18.2.0 - Modern React with hooks - **React-DOM** ^18.2.0 - React DOM renderer ### Development Dependencies - **Vite** ^5.0.0+ - Lightning-fast build tool - **TailwindCSS** ^3.4.0 - Utility-first CSS framework - **@tailwindcss/postcss** - PostCSS integration - **Autoprefixer** - CSS vendor prefixes - **ESLint** - Code linting (React configuration) ### TypeScript (if selected) - **TypeScript** ^5.0.0+ - Static type checking - **@types/react** - React type definitions - **@types/react-dom** - React DOM type definitions ## ⚙️ Configuration Details ### Tailwind Configuration ```javascript // tailwind.config.js export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], }; ``` ### PostCSS Configuration ```javascript // postcss.config.js export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; ``` ### CSS Setup The generated `src/index.css` includes: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` ## 🎨 Clean Boilerplate Unlike other generators, `create-vite-pp` provides a minimal, clean starting point: ```jsx function App() { return ( <div className="min-h-screen relative bg-black"> {/* Attribution */} <div className="fixed bottom-4 right-4 text-xs text-gray-400"> — Pritam Paul — </div> </div> ); } export default App; ``` Perfect for starting your project without removing unnecessary code! ## 🚦 Available Scripts After project creation, you can run: ```bash # Start development server npm run dev # Build for production npm run build # Preview production build npm run preview # Run linting npm run lint ``` ## 🔍 Validation Features ### Project Name Validation - ✅ Non-empty names - ✅ Valid characters (alphanumeric, hyphens, underscores) - ✅ No directory conflicts - ✅ Proper naming conventions ### Prerequisites Check - ✅ Node.js installation - ✅ npm availability - ✅ Version compatibility ## 🎯 Advanced Usage ### Handling Errors The CLI provides helpful error messages: ```bash ✗ Command failed: npm install ✗ Error: Network timeout ``` ### Interruption Handling Safe interruption with `Ctrl+C`: ```bash ✗ Setup interrupted ``` ## 🤝 Contributing Contributions are welcome! Please feel free to submit a Pull Request. ### Development Setup ```bash # Clone the repository git clone https://github.com/pritam-pauldev/create-vite-pp.git cd create-vite-pp # Install dependencies npm install # Test locally npm link create-vite-pp test-project ``` ### Building ```bash # Test the package npm run start # Publish to npm npm publish ``` ## 📝 Changelog ### v1.0.8 - ✅ Added TypeScript support - ✅ Improved error handling - ✅ Updated to TailwindCSS v3.4+ - ✅ Enhanced project validation - ✅ Better README generation ### v1.0.7 - ✅ Initial release - ✅ Basic Vite + React + Tailwind setup - ✅ Interactive CLI prompts ## 🐛 Troubleshooting ### Common Issues **Issue**: `npm ERR! EACCES: permission denied` ```bash # Solution: Fix npm permissions npm config set prefix ~/.npm-global export PATH=~/.npm-global/bin:$PATH ``` **Issue**: `Command 'create-vite-pp' not found` ```bash # Solution: Install globally or use npx npm install -g create-vite-pp # OR npx create-vite-pp ``` **Issue**: Slow installation ```bash # Solution: Use faster npm registry npm config set registry https://registry.npmjs.org/ ``` ## 📊 Performance - **Setup Time**: ~30 seconds - **Package Size**: ~24 dependencies - **Node.js Requirement**: ≥14.0.0 - **Cross-Platform**: ✅ Windows, macOS, Linux ## 🔗 Related Projects - [Vite](https://vitejs.dev/) - Next generation frontend tooling - [React](https://reactjs.org/) - A JavaScript library for building user interfaces - [Tailwind CSS](https://tailwindcss.com/) - Rapidly build modern websites ## 📄 License MIT License - see the [LICENSE](LICENSE) file for details. ## 👨‍💻 Author **Pritam Paul** - GitHub: @pritam-pauldev - LinkedIn: linkedin.com/in/pritam-dev - Email: pritampaulcontactme@gmail.com ## 🙏 Acknowledgments - The Vite team for the amazing build tool - The React team for the fantastic library - The Tailwind CSS team for the utility-first framework - All contributors and users of this package --- <div align="center"> **[⭐ Star this repo](https://github.com/pritam-pauldev/create-vite-pp) if you found it helpful!** Made with ❤️ by **Pritam Paul** </div>