Getting Started
Welcome to the Crane CLI documentation! This guide will help you get up and running quickly.
What is Crane?
Crane is a specialized framework for building Server-Side Rendered (SSR) e-commerce themes on the Lightspeed Online Presence (E-Series) platform using Vue 3 and Vite.
Key Features
- Fast Development: Quickly scaffold, develop, and preview custom sections with hot module replacement and TypeScript support
- Fully Customizable: Build sections with complete control over HTML, CSS, and JavaScript while leveraging powerful APIs
- Developer Experience: Built-in TypeScript support, ESLint configurations, and comprehensive tooling for modern web development
- Headless API Client: Access Ecwid's public API with a fully-typed, headless JavaScript client for building custom integrations
- Modern Stack: Powered by Vite for lightning-fast builds and development experience
Packages
Crane is organized into four packages:
| Package | Description |
|---|---|
@lightspeed/crane | CLI tool for scaffolding, building, previewing, and deploying applications |
@lightspeed/crane-api | Runtime library providing Vue 3 composables for content and design settings |
@lightspeed/ecom-headless | Fully-typed headless JavaScript client for the Ecwid public API |
@lightspeed/eslint-config-crane | Preconfigured ESLint setup for section development |
Prerequisites
Before you begin, ensure you have:
- Node.js: Version 22.x or higher
- npm: Version 10 or higher
- Lightspeed Application Credentials: Contact your Partner Manager for:
- Application client ID and secret key
- Required permissions for deployment
- Test site access (optional)
What's Next
- Installation — install Crane and configure credentials
- Quick Start — go from zero to preview in 5 minutes
- Your First Section — build a hero banner with image and CTA button
- Your First Template — create a template and wire sections into pages