start

Start the React Scanner Studio development server to view your component usage dashboard.

Usage

react-scanner-studio start [options]

Description

The start command launches a local development server that serves the interactive dashboard. It reads the scan data generated by react-scanner and displays it in a beautiful, interactive UI.

Before running this command, make sure you have:

1. Initialized your project with react-scanner-studio init
2. Generated scan data by running npx react-scanner

Options

Option	Alias	Default	Description
--port <number>	-p	3000	Port to run the server on
--exact-port		false	Exit if the specified port is not available
--ci		false	Run in CI mode (no interactive prompts)
--open		false	Open the browser automatically

Scan Report Handling

Before starting the server, the command checks for an existing scan report:

When a Report Exists

If a scan report is found, you'll be prompted:

   ℹ Found existing scan report with 42 components (5 minutes ago)
? Use existing report? (No to generate a new one) (Y/n)

• Yes (default) — Use the existing report and start the server
• No — Generate a new scan report before starting

When No Report Exists

If no scan report is found, you'll be prompted:

   ⚠ No scan report found.
? Would you like to generate a scan report now? (Y/n)

• Yes (default) — Run the scanner and then start the server
• No — Exit without starting the server

CI Mode Behavior

In CI mode (--ci):

• If a report exists, it will be used automatically without prompting
• If no report exists, the command will exit with an error

Examples

Basic Usage

Start the server on the default port (3000):

react-scanner-studio start

Custom Port

Start the server on a specific port:

react-scanner-studio start --port 8080
# or
react-scanner-studio start -p 8080

Auto-Open Browser

Start the server and automatically open the dashboard in your default browser:

react-scanner-studio start --open

CI Mode

Run in CI mode without interactive prompts. The command will use an existing scan report automatically, and if the port is unavailable, it will automatically use an available port:

react-scanner-studio start --ci

WARNING

In CI mode, if no scan report exists, the command will fail. Make sure to run react-scanner-studio scan before starting in CI mode.

Exact Port

Exit with an error if the specified port is not available (useful in CI/CD pipelines where you need a predictable port):

react-scanner-studio start --port 3000 --exact-port

Port Handling

By default, if the requested port is already in use, React Scanner Studio will:

1. In interactive mode — Prompt you to use an alternative available port
2. In CI mode — Automatically use an available port and log the change
3. With --exact-port — Exit with an error

Interactive Prompt Example

$ react-scanner-studio start --port 3000

⚠ Port 3000 is not available.
? Would you like to run on port 3001 instead? (Y/n)

Output

When the server starts successfully, you'll see:

╭──────────────────────────────────────────────────╮
│                                                  │
│   🚀 React Scanner Studio: Server Running        │
│                                                  │
│   Local:    http://localhost:3000                │
│                                                  │
│   Press Ctrl+C to stop the server                │
│                                                  │
╰──────────────────────────────────────────────────╯

Error Handling

Missing Configuration

If react-scanner.config.js is not found:

╭─────────────────────────────────────────────╮
│   Configuration Not Found                   │
│                                             │
│   react-scanner.config.js not found.        │
│   Run react-scanner-studio init first to    │
│   create the configuration.                 │
╰─────────────────────────────────────────────╯

Missing Scan Data

If the scan data file doesn't exist:

╭─────────────────────────────────────────────╮
│   Scan Data Not Found                       │
│                                             │
│   Scan data file not found.                 │
│   Run npx react-scanner first to generate   │
│   the scan data.                            │
╰─────────────────────────────────────────────╯

Missing react-scanner

If react-scanner is not installed:

╭─────────────────────────────────────────────╮
│   Missing Dependency: "react-scanner"       │
│                                             │
│   react-scanner is not installed.           │
│   This package is required to analyze your  │
│   React components.                         │
╰─────────────────────────────────────────────╯

To install, run one of the following:

  npm install react-scanner --save-dev
  yarn add react-scanner --dev
  pnpm add react-scanner --save-dev

See Also

• init — Initialize configuration
• build — Build static files for production
• Configuration — Configure react-scanner