Skip to content

Quick Start

This guide takes you from zero to a running Crane application in about 5 minutes.

Create Your Application

💡 Working Directory

Make sure you are in the directory you created in the Installation step

Scaffold a new Crane application:

bash
npx @lightspeed/crane@latest init --app my-app
cd my-app

This generates a ready-to-use project with a default configuration, an example section, and the required project structure.

Project Structure

After initialization, your project looks like this:

my-app/
├── crane.config.json      # Application credentials
├── package.json           # Node.js dependencies
├── sections/              # Custom sections
│   └── example-section/   # Default example section
├── headers/               # Custom header components
├── footers/               # Custom footer components
├── preview/               # Local development preview server
│   ├── sections/          # Section preview setup
│   ├── shared/            # Shared preview utilities
│   ├── ssr-server.ts      # SSR server for local testing
│   └── vite.config.js     # Vite configuration for preview
├── shared/                # Shared components and utilities
└── dist/                  # Built output (generated)

Configure Credentials

Before deploying, you'll need application credentials. Create or edit crane.config.json in your application root:

json
{
  "app_client_id": "your-client-id",
  "app_secret_key": "your-secret-key"
}

⚠️ Credentials Required

Contact your Partner Manager to obtain application credentials and the required permissions for deployment.

Build

Compile your custom sections and prepare them for deployment:

bash
npx @lightspeed/crane@latest build

Preview Locally

Start a local development server to see your sections in action:

bash
npx @lightspeed/crane@latest preview

Open the URL shown in your terminal in a browser. After making changes, rebuild and refresh your browser to see the updates.

Deploy

Once you're happy with your sections, deploy to Lightspeed:

bash
npx @lightspeed/crane@latest deploy

⚠️ Prerequisites

Make sure your crane.config.json has valid app_client_id and app_secret_key before deploying.

Summary

The core workflow is:

  1. init --app — scaffold a new application
  2. build — compile your sections
  3. preview — test locally
  4. deploy — push to production

Next Steps

  • Your First Section — build a hero banner with an image and CTA button from scratch
  • CLI Usage — full command reference and advanced workflows