boilerify

🚀 Boilerify

A production-ready CLI tool to quickly scaffold fullstack projects with React + Vite and Express.

🌐 Website: boilerify-web.vercel.app

📚 Documentation: boilerify-web.vercel.app/docs

✨ Features

• 🎯 Interactive CLI - Beautiful prompts using Clack.js
• ⚛️ React + Vite - Lightning-fast frontend development
• 🎨 Tailwind CSS - Optional utility-first CSS framework (using latest @tailwindcss/vite plugin)
• 🚂 Express.js - Minimal and flexible Node.js backend
• 🔐 Environment Variables - dotenv support for secure configuration
• 📦 Clean Structure - Organized frontend/backend separation
• 🎨 Colorful Output - Enhanced terminal experience with Chalk
• ✅ Error Handling - Robust error handling and validation
• 📝 Auto-generated README - Project documentation out of the box

📋 Prerequisites

Before using Boilerify, make sure you have:

• Node.js (v18 or higher) - Download
• npm (comes with Node.js)

🚀 Quick Start

Option 1: Use npx (Recommended)

Run Boilerify directly without installation:

```bash npx boilerify ```

Option 2: Global Installation

Install globally to use anywhere:

```bash npm install -g boilerify boilerify ```

Option 3: Local Development

Clone and run locally:

# Clone the repository
git clone https://github.com/khilesh321/boilerify.git
cd boilerify

# Install dependencies
pnpm install

# Run the CLI
node index.js
\`\`\`

## 📖 Usage

Simply run the command and follow the interactive prompts:

\`\`\`bash
boilerify
\`\`\`

### Interactive Prompts

1. **Project Name** - Enter your desired project name
2. **Frontend** - Choose whether to include React + Vite
3. **Tailwind CSS** - (If frontend selected) Set up Tailwind CSS
4. **Backend** - Choose whether to include Express server
5. **Environment Variables** - (If backend selected) Add dotenv support

### Example Session

\`\`\`
🚀 Boilerify - Fullstack Starter CLI

? What is your project name? › my-awesome-app
? Include frontend (React + Vite)? › Yes
? Set up Tailwind CSS? › Yes
? Include backend (Express)? › Yes
? Add dotenv for environment variables? › Yes

✔ Project created successfully!

┌─────────────────────────────────────────┐
│  Success! 🎉                            │
│                                         │
│  Project: my-awesome-app                │
│  Location: /path/to/my-awesome-app      │
│                                         │
│  Structure:                             │
│  ✔ Frontend (React + Vite) + Tailwind   │
│  ✔ Backend (Express) + dotenv           │
│                                         │
│  Next steps:                            │
│    $ cd my-awesome-app                  │
│    $ cd frontend && npm install && ...  │
│    $ cd backend && npm run dev          │
└─────────────────────────────────────────┘

Happy coding! 🚀
\`\`\`

## 📁 Generated Project Structure

A full-stack project with both frontend and backend:

\`\`\`
my-awesome-app/
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── App.jsx
│   │   ├── App.css
│   │   ├── index.css        # With @import "tailwindcss"
│   │   └── main.jsx
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js       # With @tailwindcss/vite plugin
│   └── .gitignore
├── backend/
│   ├── server.js            # Express server with CORS & routes
│   ├── .env                 # Environment variables
│   ├── package.json
│   └── .gitignore
├── README.md                # Auto-generated documentation
└── .gitignore
\`\`\`

## 🛠️ Generated Files

### Backend Server (server.js)

The generated Express server includes:

- ✅ Express.js setup with JSON middleware
- ✅ CORS configuration for frontend communication
- ✅ Health check endpoint (\`/api/health\`)
- ✅ Error handling middleware
- ✅ Environment variable support with dotenv
- ✅ Development-ready logging

### Frontend Setup

The Vite + React frontend includes:

- ✅ Modern React with hooks
- ✅ Vite for ultra-fast HMR
- ✅ ESLint configuration
- ✅ Optional Tailwind CSS with new @tailwindcss/vite plugin (no PostCSS config needed!)

### Environment Variables

A \`.env\` file is created in the backend with:

\`\`\`env
PORT=5000
NODE_ENV=development
\`\`\`

## 🎯 Running Your Project

### Start the Backend

\`\`\`bash
cd my-awesome-app/backend
npm install  # First time only
npm run dev  # Starts server with auto-reload
\`\`\`

Backend will run on: \`http://localhost:5000\`

### Start the Frontend

\`\`\`bash
cd my-awesome-app/frontend
npm install  # First time only
npm run dev  # Starts Vite dev server
\`\`\`

Frontend will run on: \`http://localhost:5173\`

## 🔧 Development Scripts

### Frontend Scripts

- \`npm run dev\` - Start development server with HMR
- \`npm run build\` - Build for production
- \`npm run preview\` - Preview production build
- \`npm run lint\` - Run ESLint

### Backend Scripts

- \`npm run dev\` - Start server with auto-reload (Node.js --watch)
- \`npm start\` - Start production server

## 🌟 Features Explained

### Interactive Prompts (Clack.js)

Boilerify uses [@clack/prompts](https://github.com/natemoo-re/clack) for:
- Beautiful, interactive CLI prompts
- Input validation
- Loading spinners
- Professional intro/outro messages

### Colorful Output (Chalk)

[Chalk](https://github.com/chalk/chalk) provides:
- Colored terminal output
- Better readability
- Status indicators (✔, ✖, ⚠)

### Smart Error Handling

- Command existence validation
- Directory conflict resolution
- Installation failure warnings
- Clear error messages

## 📦 Package Manager Support

Boilerify uses npm by default for scaffolding projects, but you can use any package manager:

- **npm** - Default, widely supported
- **pnpm** - Fast, disk-space efficient (this project uses pnpm)
- **yarn** - Popular alternative

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (\`git checkout -b feature/AmazingFeature\`)
3. Commit your changes (\`git commit -m 'Add some AmazingFeature'\`)
4. Push to the branch (\`git push origin feature/AmazingFeature\`)
5. Open a Pull Request

## 📄 License

This project is licensed under the ISC License.

## 🙏 Acknowledgments

- [Clack](https://github.com/natemoo-re/clack) - Beautiful CLI prompts
- [Chalk](https://github.com/chalk/chalk) - Terminal styling
- [Vite](https://vitejs.dev/) - Next generation frontend tooling
- [React](https://react.dev/) - JavaScript library for building UIs
- [Express](https://expressjs.com/) - Fast, minimalist web framework
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework

## 🐛 Issues & Support

Found a bug or have a feature request? Please [open an issue](https://github.com/khilesh321/boilerify/issues).

## 📧 Contact

Khilesh - [LinkedIn](https://www.linkedin.com/in/khilesh-jawale/)

Project Link: [https://github.com/khilesh321/boilerify](https://github.com/khilesh321/boilerify)

---

Made with ❤️ and ☕ by [Khilesh](https://github.com/khilesh321)