Start with Crane app

With the Crane installed in your system, it should take about 5 minutes to get a running Crane application.

Need some examples?

Check out Theme examples built by our team: Github repo

Create Your Application

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-app

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

Project Structure

After initialisation, your project should look 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"
}

Find the client_id and client_secret values for your custom application to the file. Find these values at the bottom of the Ecwid admin > #develop-apps > Details page.

Build

Compile your custom sections and prepare them for deployment:

npx @lightspeed/crane@latest build

Want to know more about Crane CLI commands?

Jump into Deep dive into Crane CLI

Preview Locally

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

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:

npx @lightspeed/crane@latest deploy

To push changes to Ecwid:

Call build and deploy commands every time you need to push some changes into your Crane app.

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

• Make your first section — build a hero banner with an image and CTA button from scratch
• Make your first template — build a template using previously created hero banner