Quickstart

# clone your project or initialize a new one
git clone <your-salesive-repo>
cd <your-salesive-repo>

# install dependencies
npm install

# install Salesive packages
npm install salesive-api-axios
npm install salesive-dev-tools --save-dev

# optional: install CLI globally for easier access
npm install -g salesive-dev-tools

# Vite projects use VITE_ prefix
VITE_SALESIVE_SHOP_ID=your_shop_id
VITE_SALESIVE_API_KEY=your_api_key

# For Next.js, use NEXT_PUBLIC_ prefix
# NEXT_PUBLIC_SALESIVE_SHOP_ID=your_shop_id
# NEXT_PUBLIC_SALESIVE_API_KEY=your_api_key

{
    "name": "my-salesive-store",
    "version": "1.0.0",
    "description": "My Salesive storefront",
    "variables": {
        "color-brand-primary": "#0d65d9",
        "color-brand-primary-x": "#e6f6ff",
        "font-brand-space": "Space Grotesk",
        "app-name": "Salesive Store",
        "app-description": "Premium storefront powered by Salesive",
        "app-logo": "https://assets.salesive.com/logo.svg",
        "app-favicon": "https://assets.salesive.com/favicon.ico"
    }
}

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { salesiveConfigPlugin } from "salesive-dev-tools";

export default defineConfig({
    plugins: [react(), salesiveConfigPlugin()],
});

import { useEffect } from "react";
import { auth, cart, products } from "salesive-api-axios";
import { useSalesiveConfig } from "salesive-dev-tools";

function App() {
    const appName = useSalesiveConfig("app-name");
    const brandColor = useSalesiveConfig("color-brand-primary");

    useEffect(() => {
        // Fetch products from the Store API
        const loadProducts = async () => {
            const { data } = await products.list({ limit: 10 });
            console.log(data);
        };
        loadProducts();
    }, []);

    return (
        <div style={{ color: brandColor }}>
            <h1>{appName}</h1>
        </div>
    );
}

# authenticate with Salesive Themes API
salesive auth set-token

# verify authentication
salesive auth status

# start your Vite dev server
npm run dev

# or use salesive CLI for config-watching
salesive dev --config ./salesive.config.json

# validate your configuration
salesive validate

# deploy your template to Salesive Themes API
salesive cook

# or specify custom paths
salesive cook --path ./my-template --config ./salesive.config.json

# keep temp files for debugging
salesive cook --keep-temp --verbose