@dutchiesdk/ecommerce-sdk-cli

CLI and developer test bench for building and previewing Dutchie E-Commerce Pro themes.

Quick Start

Install as a dev dependency in your themes project:

pnpm add -D @dutchiesdk/ecommerce-sdk-cli

Then run the dev server:

npx @dutchiesdk/ecommerce-sdk-cli dev

This starts the test bench at http://localhost:4000 with hot reload. Themes are discovered automatically from ./src/themes/ relative to your working directory.

CLI

npx @dutchiesdk/ecommerce-sdk-cli <command> [options]

Commands

| Command | Description | |---------|-------------| | dev | Start the test bench dev server with hot reload | | build | Production build — outputs Module Federation bundles to ./dist/ | | mcp | Start an MCP proxy for the Dutchie SDK documentation |

Options

| Flag | Default | Description | |------|---------|-------------| | --themes-dir <path> | ./src/themes | Path to the directory containing theme folders (dev, build) | | --latency <ms> | 0 | Simulated latency in ms for dev server requests (dev) |

Environment Variables

| Variable | Description | |----------|-------------| | PRODUCTION_ASSET_URL | Asset prefix for production builds (CDN URL) | | CF_PAGES_URL | Cloudflare Pages URL (fallback for asset prefix) |

Test Bench

The dev server includes a full-featured theme test bench with:

• Sidebar — Searchable list of all discovered themes with slot indicator badges
• Storefront Preview — Renders Header, Hero, Footer, and custom pages with mock data
• Product Card Preview — Grid and list card rendering with mock product data
• Slot Inspector — Visual audit of which RemoteModuleRegistry slots a theme implements
• Viewport Controls — Desktop (1440px), Tablet (768px), and Mobile (375px) presets
• Action Log — Captures mock action calls (addToCart, goToCheckout, etc.) with timestamps
• URL State — Theme, view mode, and viewport are synced to query params for bookmarkable states

Test Fixtures

The package exports mock data factories for use in theme unit tests:

import {
  mockedBoundaryData,
  mockedTheme,
  mockedProductCardGridItems,
  mockedProductCardListItems,
  getRandomLocation,
} from '@dutchiesdk/ecommerce-sdk-cli/support';

| Export | Returns | |--------|---------| | mockedBoundaryData(log?) | CommerceComponentsDataInterface with mock location, user, cart, data loaders, and actions | | mockedTheme() | Theme object with MUI breakpoints | | mockedProductCardGridItems(log?) | Array of ProductCardGridProps (4 mock products) | | mockedProductCardListItems(log?) | Array of ProductCardListItemProps (4 mock products) | | getRandomLocation() | Random Dispensary object via faker |

The optional log parameter accepts a callback for capturing action calls in the test bench UI.

Theme Project Setup

A minimal themes project needs:

my-themes/
  package.json
  src/
    themes/
      my-theme/
        index.tsx      # default export satisfies RemoteModuleRegistry
        store-front/
          header.tsx
          footer.tsx

With this package.json:

{
  "scripts": {
    "dev": "ecommerce-sdk-cli dev",
    "build": "ecommerce-sdk-cli build"
  },
  "dependencies": {
    "@dutchiesdk/ecommerce-extensions-sdk": ">=0.21.0",
    "react": "^18.0",
    "react-dom": "^18.0",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "@dutchiesdk/ecommerce-sdk-cli": "^0.1.0"
  }
}

MCP Server

The mcp command starts a Model Context Protocol proxy that gives AI coding assistants access to the Dutchie SDK documentation. It bridges stdio to the remote GitBook-hosted MCP server, auto-detecting SSE or Streamable HTTP transport.

npx @dutchiesdk/ecommerce-sdk-cli mcp

Cursor / VS Code

Add to .cursor/mcp.json (or .vscode/mcp.json):

{
  "mcpServers": {
    "dutchie-sdk-docs": {
      "command": "npx",
      "args": ["@dutchiesdk/ecommerce-sdk-cli", "mcp"]
    }
  }
}

Claude Desktop

Add to your Claude Desktop config:

{
  "mcpServers": {
    "dutchie-sdk-docs": {
      "command": "npx",
      "args": ["@dutchiesdk/ecommerce-sdk-cli", "mcp"]
    }
  }
}

Build Output

The build command produces Module Federation bundles compatible with the Dutchie Ecommerce Pro:

dist/
  customer_themes.js       # Module Federation entry
  mf-manifest.json         # Manifest for remote loading
  static/
    js/async/              # Theme chunk bundles
    image/                 # Optimized theme assets

Peer Dependencies

• react ^18.0
• react-dom ^18.0
• @dutchiesdk/ecommerce-extensions-sdk >=0.22.0