@hubspire/react-hub-cli NPM

React Hub CLI 🚀

A powerful CLI tool created by Hubspire for bootstrapping React applications with best practices, essential configurations, and common functionalities.

✨ Features

🏗️ Quick Project Setup - Scaffold a new React project with all the essential configurations
🧩 Component Generation - Generate reusable components with proper structure
📝 Type-Safe - Built with TypeScript for better developer experience
🔄 CRUD Operations - Generate CRUD pages with minimal effort
🔐 Authentication - Quickly add login and other authentication pages
📱 Responsive Layouts - Built-in responsive layouts and components
🎨 UI Components - Integration with ShadCn UI for beautiful, accessible components
🧪 Testing Setup - Pre-configured with testing tools
📊 GraphQL Support - Integrated with Apollo Client for GraphQL operations

📦 Installation

npm install -g @hubspire/react-hub-cli

🚀 Quick Start

Create a new React app

rhc create-app my-awesome-app

Generate routes

rhc create-routes home,about,contact

Create login page

rhc create-login path/to/config.json

Generate CRUD pages

rhc create-crud path/to/config.json

Generate a complete project from a JSON file

rhc generate path/to/config.json

📄 Configuration

React Hub CLI uses JSON configuration files to generate complex projects. Here's a basic example:

{
  "app": {
    "name": "my-app",
    "description": "My awesome app",
    "author": "Hubspire",
    "branding": {
      "brandName": "MyApp",
      "primaryColor": "#38b2ac",
      "secondaryColor": "#f0f2f5",
      "logo": "https://example.com/logo.svg"
    },
    "apiEndpoint": "https://api.example.com"
  },
  "modules": [
    {
      "name": "auth",
      "pages": [
        {
          "type": "EmailPassword",
          "name": "LoginPage",
          "route": "/login",
          "isPrivate": false,
          "api": [
            {
              "type": "login",
              "graphqlHook": "useLoginMutation",
              "queryString": "mutation Login($data: LoginInput!) { login(data: $data) { refreshToken accessToken } }"
            }
          ]
        }
      ]
    },
    {
      "name": "users",
      "pages": [
        {
          "type": "Listing",
          "name": "UserListPage",
          "route": "/users",
          "isPrivate": true,
          "api": [
            {
              "type": "list",
              "graphqlHook": "useGetAllUsersQuery",
              "queryString": "query GetAllUsers { getAllUsers { id name email } }"
            }
          ],
          "columns": [
            { "field": "id", "label": "ID" },
            { "field": "name", "label": "Name" },
            { "field": "email", "label": "Email" }
          ],
          "actions": ["create", "edit", "delete"]
        }
      ]
    }
  ]
}

🛠️ Commands

Command	Alias	Description
`create-app`	`ca`	Create a new React app
`create-routes`	`cr`	Create new routes for the application
`create-login`	`clogin`	Create login page and setup authentication
`create-crud`	`crud`	Create CRUD pages for a module
`generate`	`g`	Generate a complete project from a JSON file
`info`	`i`	Display system and CLI information

🧰 Project Structure

When you create a new project with React Hub CLI, it sets up the following structure:

my-awesome-app/
├── src/
│   ├── assets/          # Static assets
│   ├── components/      # Reusable UI components
│   ├── config/          # Configuration files
│   │   ├── apollo/      # Apollo Client setup
│   ├── hooks/           # Custom React hooks
│   ├── layout/          # Layout components
│   ├── lib/             # Utility functions
│   ├── pages/           # Page components
│   ├── routes/          # Routing configuration
│   ├── types/           # TypeScript type definitions
│   ├── vars/            # Apollo reactive variables
│   ├── App.tsx          # Main App component
│   └── main.tsx         # Entry point
├── .eslintrc.js         # ESLint configuration
├── .husky/              # Git hooks
├── .prettierrc.js       # Prettier configuration
├── codegen.ts           # GraphQL code generation
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite configuration