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:

``bash
npm i create-vite-react-plus
`

Initialize the project creation via CLI

Usage

Run the CLI and follow the prompts

`bash
npm create vite-react-plus
`

$3

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:

`bash
├── 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:

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

`

Available Scripts

`bash
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.