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:
npx @lightspeed/crane@latest init --app my-app
cd my-appThis 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:
{
"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:
npx @lightspeed/crane@latest buildPreview Locally
Start a local development server to see your sections in action:
npx @lightspeed/crane@latest previewOpen 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:
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:
init --app— scaffold a new applicationbuild— compile your sectionspreview— test locallydeploy— 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