VTU Vite CLI

Interactive CLI to scaffold React + Vite projects from pre-built templates.

🚀 Installation

Global Install (Recommended)

npm install -g vtu-vite-cli

Then use from anywhere:

vtu-vite-cli

Use with npx (No Installation Required)

npx vtu-vite-cli

📝 Usage

Simply run the command in your terminal:

vtu-vite-cli

The CLI will prompt you with:

1. Select a template - Choose from available templates (program6, program10, etc.)
2. Enter project name - Give your project a name
3. Confirm creation - Review your choices and confirm

Then follow the next steps to get your project running!

📦 Available Templates

program6

A React + Vite registration/login form with:

• Form validation
• Error handling
• Show/hide password toggle
• Responsive design
• User form component

program10

A React + Vite starter template with:

• Modern component structure
• Styling setup
• Ready for custom development

⚡ Quick Start

1. Create a new project

vtu-vite-cli

2. Navigate to your project

cd your-project-name

3. Install dependencies

npm install

4. Start development server

npm run dev

The app will open in your browser at http://localhost:5173

5. Build for production

npm run build

🛠️ What You Get

Each template includes:

• ✅ Pre-configured Vite setup
• ✅ React 18.2 with hooks
• ✅ ESLint configuration
• ✅ Auto-generated package.json
• ✅ All dependencies in package.json

📋 Project Structure

your-project-name/
├── index.html
├── package.json
├── vite.config.js
├── eslint.config.js
├── public/
│   └── vite.svg
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── components/ (varies by template)

🔧 Troubleshooting

Command not found

If vtu-vite-cli is not recognized after global install:

npm install -g vtu-vite-cli

Or reinstall and ensure npm global bin directory is in PATH.

Templates not found

Make sure you're running the CLI from a directory where you want projects created, not from the CLI package directory.

Permission errors on macOS/Linux

npm install -g vtu-vite-cli --unsafe-perm

Port 5173 already in use

The dev server will try the next available port. You can also specify a port:

npm run dev -- --port 3000

📚 Next Steps After Creation

1. Explore the template code in src/
2. Customize the app as needed
3. Install additional packages: npm install package-name
4. Read Vite docs: https://vitejs.dev
5. Read React docs: https://react.dev

🤝 Contributing

Found a bug or want to improve templates?

• Create an issue on GitHub
• Submit a pull request with improvements
• Share feedback

📄 License

ISC

💡 Tips

• Each template is independent - feel free to modify styles and components
• Vite provides hot module replacement (HMR) for instant updates
• Use npm run build before deploying to production
• Check vite.config.js to customize build settings

Happy coding! 🎉