Skip to main content

Vendure Integration

Vendure is the commerce platform we pair with the Haus Storefront SDK by default. Its GraphQL-first architecture and multi-channel capabilities align with the abstractions delivered through our npm packages, so you can get a production-ready storefront with minimal setup.

Why Vendure Is Our Default​

Vendure aligns with the SDK's architecture and delivers a production-ready foundation out of the box:

  • GraphQL-first API that matches our TypeScript contracts.
  • Multi-channel support for branded storefronts and marketplace scenarios.
  • Plugin ecosystem that covers payments, search, and custom workflows.

While Vendure is the default, the SDK is intentionally provider-agnostic. When a project calls for a different commerce engine, we work with you to deliver a new provider that implements the same interface and can be swapped in via configuration.

What You Configure​

  • Shop API URL: Pass your Vendure Shop API endpoint (including /shop-api/) via VendureProviderPreset or DataProvider options.apiUrl.
  • Channel token: Each storefront channel in Vendure has a token. Set defaultChannelToken on the preset so requests are scoped to the correct channel.
  • Locale and currency: Optional locale and currency values on the preset seed storage on mount.
  • Client behaviour: Control caching and persistence through persistOptions and feature flags on options.enabledFeatures.

Install @haus-storefront-react/providers alongside @haus-storefront-react/core for the Vendure preset builder and interceptors.

What Haus Tech Handles​

  • Channel & plugin setup: We configure Vendure channels, taxes, and essential plugins so the SDK can connect securely.
  • Advanced workflows: If you require bespoke promotions, checkout flows, or third-party integrations, we implement those extensions for you.
  • Backend alignment: We help instrument your Vendure instance (channels, tokens, plugins) so the SDK can connect securely and efficiently.
  • Ongoing maintenance: We keep the Vendure provider inside the SDK up to date with API evolutions and performance improvements.

Example Configuration​

import { DataProvider } from '@haus-storefront-react/core'
import { VendureProviderPreset } from '@haus-storefront-react/providers/vendure'

const preset = new VendureProviderPreset({
  apiUrl: 'https://your-vendure-api.com/shop-api',
  defaultChannelToken: 'YOUR_CHANNEL_TOKEN',
  locale: 'en',
  currency: 'USD',
  persistOptions: {
    enabled: false,
  },
}).toPreset()

function App() {
  return (
    <DataProvider platform='web' preset={preset}>
      <YourApplication />
    </DataProvider>
  )
}

See Providers for the full VendureProviderPreset API and Core for DataProvider options.

Last updated on