Custom React Folder Structure CLI

A CLI tool to bootstrap your React projects with custom folder structures and optional packages like Tailwind CSS, TypeScript, Redux, and Vite.

Table of Contents

• Summary
• Installation
• Usage
• Optional Packages
• Folder Structures
• Commands Generated
• How It Works
• Contributing

Summary

This CLI tool aims to simplify the process of setting up a new React project by providing options for folder structures and additional packages. It automates the tedious tasks of creating folders, installing packages, and setting up your development environment.

Installation

To install the package, run:

npm install -g custom-react-folder-structure-cli

Usage

After installation, navigate to your workspace and run:

custom-react-folder-structure-cli init

You'll be prompted to answer a series of questions to customize your React project.

Optional Packages

You can choose to install any combination of the following packages:

• Tailwind CSS: A utility-first CSS framework.
• TypeScript: A superset of JavaScript that adds static types.
• Redux: A state management library.
• Vite: A build tool and development server.

Folder Structures

You can choose from the following folder structures:

• Default: No change to the normal React structure.

• Choice A: A comprehensive structure suitable for larger projects. Here's a diagram to give you an idea:

  src/
  ├── api-client/
  │ ├── live/
  │ ├── mock/
  │ └── models/
  ├── assets/
  ├── components/
  ├── constants/
  ├── http-client/
  ├── localization/
  ├── models/
  ├── primitives/
  ├── shared-hooks/
  ├── store/
  ├── tailwind/
  ├── tests/
  ├── views/
  └── views-public/

• Choice B: This is like Choice A but no subdirectories:

  src/
  ├── api-client/
  ├── assets/
  ├── components/
  ├── constants/
  ├── http-client/
  ├── localization/
  ├── models/
  ├── primitives/
  ├── shared-hooks/
  ├── store/
  ├── tailwind/
  ├── tests/
  ├── views/
  └── views-public/

Commands Generated

Based on the packages you choose, the CLI will run one of the following commands to create your React project:

• Vite + TypeScript: npx create-vite@latest [project-name] --template react-ts
• Vite: npx create-vite@latest [project-name] --template react
• TypeScript: npx create-react-app [project-name] --template typescript
• Default: npx create-react-app [project-name]

How It Works

The CLI uses a series of prompts to gather your preferences. Once all options are selected, it runs the appropriate command to create your React project and then proceeds to set up the folder structure and install any additional packages.

Contributing

Feel free to open an issue or submit a pull request if you have any suggestions or find any bugs.