# Start with Crane app

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

{% hint style="success" %}
**Need some examples?**

Check out Theme examples built by our team: [**Github repo**](https://github.com/LightspeedHQ/crane-example-themes)
{% endhint %}

### Create Your Application <a href="#create-your-application" id="create-your-application"></a>

{% hint style="info" icon="folder" %}
Make sure you are in the directory you created in the [Installation step](/site-themes/develop-site-themes/getting-started/install-crane-to-your-system.md)
{% endhint %}

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 <a href="#project-structure" id="project-structure"></a>

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 <a href="#configure-credentials" id="configure-credentials"></a>

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"
}
```

{% hint style="warning" icon="sliders" %}
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**](https://my.ecwid.com/#develop-apps) page.
{% endhint %}

### Build <a href="#build" id="build"></a>

Compile your custom sections and prepare them for deployment:

```bash
npx @lightspeed/crane@latest build
```

{% hint style="info" icon="book-open" %}
**Want to know more about Crane CLI commands?**

Jump into [Deep dive into Crane CLI](/site-themes/develop-site-themes/getting-started/deep-dive-into-crane-cli.md)
{% endhint %}

### Preview Locally <a href="#preview-locally" id="preview-locally"></a>

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 <a href="#deploy" id="deploy"></a>

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

```bash
npx @lightspeed/crane@latest deploy
```

{% hint style="success" %}
**To push changes to Ecwid:**

Call `build` and `deploy` commands every time you need to push some changes into your Crane app.
{% endhint %}

{% hint style="warning" icon="sliders" %}
Make sure your `crane.config.json` has valid `app_client_id` and `app_secret_key` before deploying.
{% endhint %}

### Summary <a href="#summary" id="summary"></a>

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 <a href="#next-steps" id="next-steps"></a>

* [Make your first section](/site-themes/develop-site-themes/getting-started/make-your-first-section.md) — build a hero banner with an image and CTA button from scratch
* [Make your first template](/site-themes/develop-site-themes/getting-started/make-your-first-template.md) — build a template using previously created hero banner


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ecwid.com/site-themes/develop-site-themes/getting-started/start-with-crane-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.