2.0.1 ⢠Published 5 months ago
react-vite-template-generator v2.0.1
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