2.0.1 • Published 5 months ago

react-vite-template-generator v2.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
5 months ago

React Vite Template Generator

šŸš€ A CLI tool to quickly scaffold a React project with Vite, including a customizable folder structure and optional tools like TailwindCSS, ESLint, and React Router.


šŸ“¦ Installation

npm install -g create-react-vite-template

Or run directly with:

npx create-react-vite-template <project-name>

šŸ› ļø Usage

npx create-react-vite-template my-react-app

Follow the interactive prompts:

  • Choose a template: Basic, Advanced, Full-Stack
  • Install TailwindCSS? yes/no
  • Install ESLint? yes/no
  • Install React Router? yes/no

šŸ“‚ Folder Structure

A typical project structure generated by this tool looks like this:

/src
  ā”œā”€ā”€ assets/       # Static assets (images, fonts, etc.)
  ā”œā”€ā”€ components/   # Reusable UI components
  ā”œā”€ā”€ pages/        # Main pages
  ā”œā”€ā”€ hooks/        # Custom React hooks
  ā”œā”€ā”€ context/      # Global context providers
  ā”œā”€ā”€ services/     # API calls and external services
  ā”œā”€ā”€ styles/       # Global styles
  ā”œā”€ā”€ App.jsx       # Main App component
  ā”œā”€ā”€ main.jsx      # Entry point
  ā”œā”€ā”€ index.css     # Base styles

šŸš€ Features

  • Interactive CLI: Choose project options using arrow keys.
  • Custom Templates: Basic, Advanced, or Full-Stack setup.
  • Optional Tools:
    • šŸ“¦ TailwindCSS
    • šŸ›”ļø ESLint
    • šŸ”„ React Router
  • Predefined Folder Structure: Ready for scalable projects.
  • Clear Instructions: Post-setup guidance included.

āœ… Examples

Create a new project with all tools enabled:

npx create-react-vite-template my-advanced-app

šŸ“ Scripts

After creating your project, navigate to the folder and run:

cd my-react-app
npm install
npm run dev

šŸ’» Requirements

  • Node.js: >= v14.x
  • npm: >= v7.x

šŸž Troubleshooting

Error with Chalk and ESM?

Ensure you're using a supported Node.js version (>= v14). If the error persists, run:

npm install chalk inquirer