> ## Documentation Index
> Fetch the complete documentation index at: https://docs.salesive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Scaffold, run, and publish a Salesive theme with the Salesive CLI

Salesive themes are **Vite + React** projects. The `salesive-dev-tools` CLI scaffolds a project, runs it locally with live config watching, and publishes it to the Salesive Themes API.

## Prerequisites

* **Node.js 18+** and a package manager (`npm`, `yarn`, `pnpm`, or `bun`).
* A **Salesive Themes API key** (starts with `sk-`) — create one from the **Developers → API keys** area of your Salesive dashboard. You only need it to publish.

## Step 1 · Install the Salesive CLI globally

```bash theme={null}
npm install -g salesive-dev-tools
# or
yarn global add salesive-dev-tools
# or
pnpm add -g salesive-dev-tools
# or
bun add -g salesive-dev-tools
```

Verify the install:

```bash theme={null}
salesive --version
```

## Step 2 · Add your API key to the CLI

Authenticate the CLI with your Themes API key. This is stored once on your machine and is required before you can publish (`salesive cook`).

```bash theme={null}
# paste your sk-... key when prompted (input is hidden)
salesive auth set-token

# confirm the key is valid and see its permissions
salesive auth verify
```

<Note>
  Useful auth commands: `salesive auth status` (is a token set?) and `salesive auth clear-token` (remove it). Keys are sent as the `X-API-Key` header.
</Note>

## Step 3 · Scaffold a new project

Run `init` and answer the prompts — **project name**, **build tool**, **framework**, and **package manager**:

```bash theme={null}
salesive init
```

```text theme={null}
? Project name: my-store
? Build tool: Vite
? Framework: React
? Package manager: npm
```

This scaffolds a Vite + React project pre-wired with the Salesive config plugin, a `salesive.config.json`, and the `dev`/`build` scripts.

<Note>
  Prefer flags? Skip the prompts with
  `salesive init --name my-store --build-tool vite --framework react`.
  Use `--current` to scaffold into the current directory, or `--force` to overwrite an existing one. **Vite is the only supported build tool for now.**
</Note>

## Step 4 · Install dependencies and run locally

```bash theme={null}
cd my-store

# install dependencies
npm install

# start the dev server
npm run dev
```

`npm run dev` runs **`salesive dev`**, which starts Vite with live `salesive.config.json` watching — it automatically restarts when your config changes. Press `r` to restart and `q` to quit.

Open the dev server (default `http://localhost:5173`). The plugin injects your configuration into `window.SALESIVE_CONFIG` and exposes it through React hooks.

## Step 5 · Build your storefront

Fetch data with `salesive-api-axios` and read theme config with `useSalesiveConfig()`:

```jsx theme={null}
import { useEffect, useState } from "react";
import { products } from "salesive-api-axios";
import { useSalesiveConfig } from "salesive-dev-tools";

function App() {
    const appName = useSalesiveConfig("app-name");
    const brandColor = useSalesiveConfig("color-brand-primary");
    const [items, setItems] = useState([]);

    useEffect(() => {
        // The catalog adapts to the store type — read `catalogType`/`itemType`
        // to support ecommerce, restaurant, and business stores.
        products.list({ limit: 10 }).then(({ data }) => {
            setItems(data?.data?.products ?? []);
        });
    }, []);

    return (
        <div style={{ color: brandColor }}>
            <h1>{appName}</h1>
            <p>{items.length} catalog items</p>
        </div>
    );
}
```

<Note>
  See [Store types](/index#store-types) to learn how the same endpoints serve products, foods, and services, and set [`shopTypes`](/development#define-your-salesive-config) in `salesive.config.json` to declare which store types your theme supports.
</Note>

## Step 6 · Validate and publish (cook)

When your theme is ready, publish it to the Salesive Themes API. `cook` runs your build, packages the template, and uploads it — so make sure you completed [Step 2](#step-2-add-your-api-key-to-the-cli) first.

```bash theme={null}
# optional: catch config errors before publishing
salesive validate

# build, package, and upload to the Themes API
salesive cook
```

`cook` automatically runs your project's build script, then packages all template files plus `salesive.config.json` (required) and `salesive.form.json` (optional, recommended), excluding `node_modules/`, `.git/`, and temp/log files.

```bash theme={null}
# common options
salesive cook --no-build      # skip the automatic build
salesive cook --path ./theme  # publish from a specific directory
salesive cook --keep-temp     # keep the temp bundle for debugging
salesive cook --verbose       # detailed error output
```

<Note>
  Don't have a `salesive.form.json`? Generate one at{" "}
  <a href="https://form.salesive.com">form.salesive.com</a>.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Theme development guide" icon="wrench" href="/development">
    Configure the Vite plugin, define `salesive.config.json`, and use the
    config hooks and CLI workflows.
  </Card>

  <Card title="Explore the Store API" icon="code" href="/api-reference/introduction">
    Dive into authentication, products, cart, orders, shipping, and wishlist
    endpoints.
  </Card>

  <Card title="Master the Axios Client" icon="plug" href="https://www.npmjs.com/package/salesive-api-axios">
    Learn about typed API wrappers, environment detection, and token management
    with `salesive-api-axios`.
  </Card>

  <Card title="Store types & routing" icon="sitemap" href="/routing">
    Understand the storefront routes you implement and how the catalog adapts
    to each store type.
  </Card>
</CardGroup>

<Note>
  Need support? Email{" "}
  <a href="mailto:support@salesive.com">[support@salesive.com](mailto:support@salesive.com)</a> or reach out
  via your Salesive onboarding channel.
</Note>