Vite React TS CLI

A powerful CLI for creating Vite-based React projects with TypeScript and custom configurations.

Features

• 🚀 Vite + React + TypeScript setup
• 🎨 Choice of styling solutions:
  • Tailwind CSS
  • Vanilla CSS
• 📦 Predefined project structure
• ⚙️ Configurable options:
  • React Router integration
  • Zod for schema validation
  • State management libraries (Redux Toolkit, Zustand, Apollo Client)
  • Initialize Git repository
  • Install dependencies automatically
• 🔧 Pre-configured:
  • Prettier
  • ESLint
  • TypeScript
  • VSCode settings

Installation

Install via npm:

npm i create-vite-react-plus

Initialize the project creation via CLI

Usage

Run the CLI and follow the prompts

npm create vite-react-plus

Options

When running the CLI, you will be prompted to configure the following options:

1. Project Name: Enter a name for your project.
2. Styling Preference:
   • Tailwind CSS: Sets up Tailwind with default configurations.
   • Vanilla CSS: Adds a minimal CSS file.
3. React Router: Choose whether to include routing functionality.
4. Zod: Option to include Zod for schema validation.
5. State Management: Choose a state management library (Redux Toolkit, Zustand, Apollo Client).
6. Initialize Git Repo: Option to initialize a Git repository and stage initial files.
7. Install Dependencies: Option to automatically run npm install after project setup.

Each option allows you to customize your project to fit your specific needs, ensuring a tailored development environment right from the start.

Folder Structure after running the CLI, your project will have the following structure:

├── src/
│ ├── components/
│ ├── layouts/
│ ├── pages/
│ ├── utils/
│ ├── assets/
│ │ └── styles/
│ └── App.tsx
├── public/
├── .vscode/
│ └── settings.json
├── tailwind.config.js (if Tailwind CSS selected)
├── package.json
├── tsconfig.json
├── vite.config.ts

Generated VS Code Settings

If Prettier is selected, the following settings are added to .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.probe": ["javascript", "javascriptreact"],
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"]
}

Available Scripts

npm run dev       # Start the development server.
npm run build     # Build the project for production.
npm run lint      # Run ESLint on the project.
npm run prettier  # Format your codebase with Prettier.
npm run typecheck # Typecheck your codebase with TypeScript

License

This project is licensed under the MIT License.