React CLI

react-cli frontend scaffold

Use the xlab-web template of xlab-web-cli to scaffold React + TypeScript + Vite frontend projects. Keep this skill scoped to -t xlab-web; do not use it for other CLI templates.

xlab-web feature modules

The generated xlab-web project includes React 18, Vite 5, TypeScript 5.9, ESLint 9, Prettier 3, Tailwind CSS 4, Husky 9, Less, Axios, and multi-environment configuration.

Workflow

1. Determine the configuration

Extract the project name and required feature modules. Always use the xlab-web template. If the user does not specify feature modules, allow the CLI to prompt interactively.

2. Check prerequisites

Require Node.js 18 or later. Prefer pnpm for generated frontend projects; the CLI falls back to npm when pnpm is unavailable.

node -v
pnpm -v || npm -v

3. Install the CLI

npm install -g xlab-web-cli --registry https://nexus.openxlab.org.cn/repository/npm-all/

4. Create the project

# Enable every xlab-web feature
xlab-web-cli create project-name -t xlab-web -a

# Routing, SSO, Argus, and CI/CD
xlab-web-cli create project-name -t xlab-web -r -s --argus -d -p example.com

# Sensors Data analytics
xlab-web-cli create project-name -t xlab-web --sensors

# Use the interactive feature prompts for xlab-web
xlab-web-cli create project-name -t xlab-web

Treat Success！Created at ... followed by Happy hacking! as successful creation.

5. Run an xlab-web project

cd project-name
pnpm i
pnpm start

Use npm install and npm start if pnpm is unavailable.

Generated integrations

Frontend governance

The CLI initializes git, adds frontend-governance as the .governance submodule, runs its setup script when available, and creates these AI-tool instruction links:

AGENTS.md                         -> .governance/AGENTS.md
CLAUDE.md                         -> .governance/AGENTS.md
.cursor/rules/governance.mdc     -> .governance/AGENTS.md
.github/copilot-instructions.md  -> .governance/AGENTS.md

It also extends the prepare script to initialize/update the submodule, run .governance/setup.sh, and restore AGENTS.md. It does not add governance:update or governance:init npm scripts.

To update governance manually:

git submodule update --init --remote
sh .governance/setup.sh

The deployment template includes GIT_SUBMODULE_STRATEGY: recursive.

Sensors Data

When --sensors is enabled, the CLI adds @migo/migo-copilot, initializes SensorsBuried, and uses the project name as the default biz page property. With SSO enabled, it also associates the SSO user through SensorsBuried.login.

Argus session replay

When --argus is enabled, the CLI:

• Adds @argus/tracker and its npm registry configuration.
• Generates src/argus-tracker.ts.
• Controls recording with VITE_ENABLE_TRACKER.
• Reads the project key from VITE_ARGUS_PROJECT_KEY in each environment file.
• Sends recordings to https://aurora.openxlab.org.cn.

Apply for a project key at https://aurora.openxlab.org.cn/argus/projects. Mark sensitive DOM content with data-openreplay-obscured or data-openreplay-hidden.

Generated project structure

project-name/
├── .governance/
├── .gitmodules
├── AGENTS.md
├── CLAUDE.md
├── .cursor/rules/governance.mdc
├── .github/copilot-instructions.md
├── deploy/                    # when --deploy is enabled
├── env/
├── src/
└── package.json

Common issues

Project name already exists

If the CLI reports File ... is existed, choose another project name or remove the existing directory only after confirming it is safe.

Governance submodule fails

The failure is non-blocking. Check VPN and GitLab access, do not run the CLI with sudo, then retry:

git submodule add --branch main https://gitlab.pjlab.org.cn/cosmos/frontend-governance.git .governance
git submodule update --init --recursive
sh .governance/setup.sh

Governance is empty in CI

Ensure the deployment CI configuration contains:

variables:
  GIT_SUBMODULE_STRATEGY: recursive