Quick Start

This chapter will guide you through the installation and startup of comp-hub, which takes no more than 5 minutes.

Fastest way — no installation required

Run this in your project directory and comp-hub starts immediately; npx downloads the CLI on demand:

npx comp-hub

Prefer a permanent install? See Method 1.

Requirements

• Node.js >= 16.0.0
• npm >= 8.0.0

Supported Frameworks

Framework	Version	Status
Vue	2.x	✅ Supported
Vue	3.x	✅ Supported
React	18.x	✅ Supported
React	17.x	✅ Supported

Installation

Method 1: Global Installation (Recommended)

Install comp-hub CLI globally. After installation, you can use the comphub command directly:

npm install comp-hub@latest -g

Method 2: Local Dev Dependency Installation

Install only in the current project, suitable for team collaboration scenarios:

npm install comp-hub@latest -D

Method 3: No Installation (npx)

Try comp-hub without installing anything — npx fetches the CLI on demand:

npx comp-hub

comp-hub is one of the CLI's binary aliases (alongside comphub and ch). Because the alias matches the package name, npx comp-hub resolves and starts the CLI directly.

Start Service

Start after Global Installation

Execute in the project directory:

comphub

Start after Local Installation

If you installed locally with -D, you need to execute via npx:

npx comphub

Start Without Installing

Skip installation entirely and run the CLI through npx:

npx comp-hub

After successful startup, the terminal will display output similar to the following:

✓ comp-hub v0.44.11

   ██████╗  ██████╗  ███╗   ███╗ ██████╗       ██╗  ██╗ ██╗   ██╗ ██████╗
  ██╔════╝ ██╔═══██╗ ████╗ ████║ ██╔══██╗      ██║  ██║ ██║   ██║ ██╔══██╗
  ██║      ██║   ██║ ██╔████╔██║ ██████╔╝      ███████║ ██║   ██║ ██████╔╝
  ██║      ██║   ██║ ██║╚██╔╝██║ ██╔═══╝       ██╔══██║ ██║   ██║ ██╔══██╗
  ╚██████╗ ╚██████╔╝ ██║ ╚═╝ ██║ ██║           ██║  ██║ ╚██████╔╝ ██████╔╝
   ╚═════╝  ╚═════╝  ╚═╝     ╚═╝ ╚═╝           ╚═╝  ╚═╝  ╚═════╝  ╚═════╝

  Version  0.44.11
  Project  /home/user/projects/housing/vue2
  Hash     9de6965c
  Port     5478

  URL      http://localhost:5478/9de6965c/main/

  ─────────────────────────────────────────────

  comphub status                View all projects
  comphub stop    9de6965c      Stop current project
  comphub stop    --all         Stop all projects
  comphub kill                  Shutdown master

Use a browser to access the displayed URL to enter the comp-hub platform.

ch is a shorthand alias for comphub. After the banner, the CLI streams this project's MidwayJS logs; press Ctrl+C to stop. See CLI Reference for details.

CLI Command Line Parameters

You can also configure startup options via command line parameters:

comphub [options]

Parameter Description:

Parameter	Short	Type	Default	Description
--port	-p	number	5478	Service port
--dir	-d	path	"./"	Resource directory relative path
--log-level	-l	string	"error"	Log level: debug, info, warn, error

| --version | -v | - | - | Show version number | | --help | -h | - | - | Show help information |

Usage Examples:

# Start with specified port
comphub -p 8080

# Specify resource directory
comphub -d ./src

# Adjust log level
comphub -l debug

# View version number
comphub -v

# View help information
comphub -h

Configuration

To specify the component directory or configure custom proxy rules, create a .comphub.json or .comphub.js file in the project root directory:

Configuration File Format

JSON Format (.comphub.json):

{
  "dir": "./src",
  "allowDebug": false
}

JS Format (.comphub.js):

NOTE

Pay attention to your project's module system — use the export syntax that matches your project.

• CommonJS (when package.json has no "type": "module" or "type": "commonjs"):

module.exports = {
  dir: './src',
  allowDebug: false
}

• ESM (when package.json has "type": "module"):

export default {
  dir: './src',
  allowDebug: false
}

Configuration Items

Configuration Item	Type	Default	Description
dir	string	"./"	Relative path to the component code root directory. Only this directory and its subdirectories can be operated during upload/download
allowDebug	boolean	false	Whether to allow debug mode
proxy	object	-	Custom proxy rules, same format as http-proxy-middleware options

Configuration File Loading Priority

1. Try to load .comphub.json first
2. If the JSON file does not exist, try to load .comphub.js
3. If neither exists, use default configuration

Configuration Priority

Configuration value priority from high to low:

1. Command line parameters (e.g., -d ./src)
2. Configuration file (.comphub.json or .comphub.js)
3. Default configuration

Next Steps

After the service starts, you can:

• Upload Component — Publish your components to the platform
• Preview & Download — View and use components from others