Svelte Commerce on Broadleaf

What works on Broadleaf today

Known gaps: none recorded.

28 of 43 services wired, read from CONNECTORS.md on 21 September 2026, where the package version is recorded too; npm may carry a newer patch. Coverage is traced by a script in the Svelte Commerce repository: a service counts as wired only if it transitively issues an HTTP request, or delegates to one that does. It is not hand-asserted. Some services are Litekart-native concepts with no equivalent elsewhere (reels, deals, chat, gallery, popularity, demo-request, feedback, plugins, banner). They stay documented placeholders on every connector and are excluded from known gaps.

Quick start

From nothing to a Svelte Commerce storefront reading Broadleaf. You need Node.js and a Broadleaf to point it at; the storefront holds no data of its own.

# 1 — get the storefront
git clone https://github.com/itswadesh/svelte-commerce
cd svelte-commerce

# 2 — one connector at a time: remove the two the storefront ships with, add this one
npm uninstall @misiki/litekart-connector @misiki/vendure-connector
npm i @misiki/broadleaf-connector

# 3 — point it at your Broadleaf gateway
echo PUBLIC_BROADLEAF_API_URL=https://your-store.example.com >> .env

# 4 — run it
npm run dev

Environment variables

init.ts hands the connector every PUBLIC_BROADLEAF_* variable that is set, camel-cased: PUBLIC_BROADLEAF_STORE_ID arrives as storeId. The guide also lists PUBLIC_BROADLEAF_ACCESS_KEY; the connector’s source does not read it.

Every variable here begins PUBLIC_, and SvelteKit sends PUBLIC_ variables to the browser: treat each value you set as published.

What to set up on Broadleaf

• Run Broadleaf Microservices. The connector is wired against its OpenAPI documents; the 5.x/6.x monolith publishes no versioned REST contract to wire against.
• Create an OAuth client for the storefront if you want menus, customer and ratings calls: they need an application token, while catalogue browsing is anonymous.
• Let the storefront’s origin make cross-origin requests to Broadleaf (CORS): in production the browser calls PUBLIC_BROADLEAF_API_URL directly, not only the server.

How the integration works

The connector speaks Broadleaf Microservices’ REST APIs, as described by 41 OpenAPI 3.0.3 documents, and not the 5.x/6.x monolith. It takes a client-credentials token when it has an OAuth client ID and secret, and sends tenantId and applicationId from the channel and store variables.

Installing the package is the whole switch. vite.config.ts resolves whichever @misiki/*-connector is installed, and src/lib/core/connectors/init.ts hands it every PUBLIC_BROADLEAF_* variable that is set, camel-cased, at boot — in the server hook for server rendering and in the client hook for the browser, which must reach the same URL in production.

There is no Litekart API behind the storefront here, so store identity — name, logo, currency, menus, plugin toggles, theme colours — comes from src/lib/core/connectors/default-store.json merged under the default export of kitcommerce.config.ts. Until you override it, the store is called “Test”. Any Litekart REST path the connector still inherits is answered from that local data, or resolved empty, rather than requested.

Limitations

• No gaps are recorded for Broadleaf in CONNECTORS.md.
• An open question on cart totals: Broadleaf’s published CartPricing schema has no total, adjustmentsTotal or feesTotal, but the demo gateway returns them. A deployment that follows the spec strictly would render a cart total of zero.
• If you set PUBLIC_BROADLEAF_API_SECRET, the OAuth client secret reaches every visitor: SvelteKit sends PUBLIC_ variables to the browser.
• Homepage sections other than the live product list come from the active theme’s static content — the standing rule for themes.
• The Conversational Shopping assistant is Litekart-only; its widget stays hidden when another connector is active.

Troubleshooting

Before you rely on it