vite-react-cli-tool

vite-react-cli-tool is a command-line tool designed to scaffold React projects with a predefined hexagonal architecture. It sets up essential folders and integrates optional dependencies like Tailwind CSS, Redux Toolkit, and React Router, allowing for a faster and more structured development process.

Features

• Scaffold React projects with a Vite + React template.
• Hexagonal architecture setup with standard folders for modular organization: assets, components, modules, routes, store.
• Optional dependency setup for Tailwind CSS, Redux Toolkit, and React Router with simple flags.

Installation

To install vite-react-cli-tool globally run:

npm install -g vite-react-cli-tool

Usage

To create a new React project with the hexagonal architecture:

vbc create <project-name> [options]

Replace <project-name> with the desired name of your project. You can add optional flags to include Tailwind CSS, Redux Toolkit, and React Router.

Available Flags

• --tw: Adds Tailwind CSS setup, with the main CSS file configured as index.css.
• --rtk: Sets up Redux Toolkit with a basic store and example slice.
• --rr: Configures React Router with basic routing and sample pages.

Example Command

vbc create my-new-app --tw --rtk --rr

This command will create a new Vite React project named my-new-app with Tailwind CSS, Redux Toolkit, and React Router preconfigured.

Explanation of the Flags

Tailwind CSS (--tw flag)

When using the --tw flag, the tool will:

1. Install Tailwind CSS and required dependencies (postcss and autoprefixer).
2. Generate a tailwind.config.js file and configure it with the content paths for Tailwind to scan.
3. Add an index.css file in src/assets/ with the necessary Tailwind directives (@tailwind base, @tailwind components, and @tailwind utilities).

NB: the index.css file in src/assets/ is the file you should import in App.tsx

Redux Toolkit (--rtk flag)

When using the --rtk flag, the tool will:

1. Install Redux Toolkit (@reduxjs/toolkit) and React-Redux (react-redux).
2. Create a Redux store configuration in src/store/create-store.ts.
3. Add an example slice (exampleSlice.ts) in src/modules/slice/ with basic actions, demonstrating Redux setup.

React Router (--rr flag)

When using the --rr flag, the tool will:

1. Install react-router-dom for routing.
2. Set up routing in src/routes/ROUTER.tsx with sample paths.
3. Create route definitions in src/routes/routes.ts.
4. Add two sample pages (Home.tsx and About.tsx) in src/pages/ to demonstrate routing.

Project Structure

The generated project will have the following structure:

my-new-app/
├── src/
│   ├── __e2e__/                 # End-to-end testing files
│   ├── assets/                  # Static files (images, fonts, etc.)
│   ├── components/              # Reusable UI components
│   ├── modules/                 # Core application logic, organized by domain
│   │   ├── __tests__/           # Unit and integration tests for modules
│   │   ├── infra/               # Infrastructure layer (APIs, data sources)
│   │   ├── models/              # Data models and types
│   │   ├── slice/               # Redux slices and state
│   │   │   └── exampleSlice.ts  # Example Redux slice with actions
│   │   ├── use-case/            # Business logic and use cases
│   └── reducer.ts           # Root reducer that combines the module reducers
│   ├── routes/                  # Routing configuration
│   │   ├── ROUTER.tsx           # Main router component
│   │   └── routes.ts            # Route definitions and path configurations
│   └── pages/                   # Application pages (e.g., Home, About)
│       ├── Home.tsx             # Sample Home page
│       └── About.tsx            # Sample About page
│   └── store/                   # Redux store setup
│       └── create-store.ts      # Store configuration

Commands

create <project-name>

Scaffolds a new React project with a hexagonal architecture and optional configurations.

Example:

vbc create my-new-app --tw --rtk --rr

This initializes a Vite React project named my-new-app with Tailwind CSS, Redux Toolkit, and React Router configurations.

Contributing

To contribute to vite-react-cli-tool, follow these steps:

1. Fork the repository.
2. Clone your forked repository.
3. Make your changes and commit them.
4. Create a pull request.

Development Setup

To work on the tool locally:

1. Clone the repository:

   git clone <your-fork-url>

2. Install dependencies:

   npm install

3. Build the TypeScript files:

   npm run build

4. Link the package locally to test it:

   npm link

5. Test the tool by running vbc commands from anywhere on your system.

License

This project is licensed under the ISC License.