Serve

The cem serve command starts a development server for custom element development with live reload, TypeScript transformation, and automatic import map generation.

cem serve [flags]

Command Flags

Flag	Description
`--port`	Port to listen on (default: `8000`)
`--rendering`	Demo rendering mode: `light` (full UI), `shadow` (Shadow DOM), or `chromeless` (minimal, no UI) (default: `light`)
`--no-reload`	Disable live reload
`--target`	TypeScript/JavaScript transform target: `es2015`, `es2016`, `es2017`, `es2018`, `es2019`, `es2020`, `es2021`, `es2022`, `es2023`, `esnext` (default: `es2022`)
`--no-import-map-generate`	Disable automatic import map generation from package.json
`--import-map-override-file`	Path to JSON file with custom import map entries (merged with auto-generated map)
`--css-transform`	Glob patterns for CSS files to transform to JavaScript modules (opt-in, e.g., `src/*/.css,elements/*/.css`)
`--css-transform-exclude`	Glob patterns for CSS files to exclude from transformation (e.g., `demo/*/.css`)
`--watch-ignore`	Glob patterns to ignore in file watcher (comma-separated, e.g., `_site/,dist/`)

Static Build Flags

Flag	Description
`--build`	Build a static site instead of starting a dev server
`-o`, `--output`	Output directory for static build (default: `dist`)
`--base-path`	URL base path for deployment (e.g., `/docs/components/`)
`--import`	Dependency resolution: `vendor` (default), `esm`, `jspm`, `unpkg`

Global Flags

Flag	Description
`--config`	Path to config file (auto-discovers `.config/cem.yaml`, `.cem.yaml`, etc.)
`--package`, `-p`	Deno-style package specifier (e.g., `npm:@scope/package`) or path to package directory
`--source-control-root-url`	Canonical public source control URL for primary branch (e.g., `https://github.com/user/repo/tree/main/`)
`--quiet`, `-q`	Quiet output (only warnings and errors)
`--verbose`, `-v`	Verbose logging output

Examples

Basic usage

cem serve

Starts the server on http://localhost:8000.

Common options

# Use a different port
cem serve --port 3000

# Disable live reload
cem serve --no-reload

# Use chromeless mode for testing
cem serve --rendering=chromeless

# Configure TypeScript target
cem serve --target es2020

# Ignore build directories in watcher
cem serve --watch-ignore 'dist/**,_site/**'

Static site build

# Build a static site
cem serve --build -o dist/

# Build with a base path for deployment under a subdirectory
cem serve --build -o dist/ --base-path /docs/components/

# Use a CDN instead of vendoring dependencies
cem serve --build -o dist/ --import esm

Configuration

All command-line flags have corresponding configuration file options. See Configuration for the complete reference.

Example .config/cem.yaml:

serve:
  port: 3000
  demos:
    rendering: shadow
  target: es2020
  transforms:
    css:
      include:
        - 'src/**/*.css'
      exclude:
        - 'demo/**/*.css'
  importMap:
    generate: true
    overrideFile: '.config/importmap.json'
  urlRewrites:
    - urlPattern: "/dist/:path*"
      urlTemplate: "/src/{{.path}}"
  watch:
    ignore:
      - 'dist/**'
      - '_site/**'

See Also

Development Workflow - Using the dev server in your workflow
Static Site Generation - Building a static site from your demos
Buildless Development - TypeScript and CSS transformation
Rendering Modes - Light, shadow, and chromeless modes
Import Maps - Using npm packages without bundling
Configuration - Complete configuration reference