windwhirl

Posted on Jul 29

Building a Vendure Connector for SvelteCommerce

#frontend #webdev #architecture #opensource

One of the goals behind SvelteCommerce has always been to keep the storefront independent of the ecommerce backend.

Instead of coupling the frontend directly to a specific platform, SvelteCommerce uses a connector-based architecture. Every supported commerce platform implements the same interface, allowing the storefront to remain unchanged while the backend can be swapped.

Recently, I added support for Vendure by building a dedicated connector.

In this article, I'll explain the architecture, why I chose this approach, and how you can integrate Vendure with SvelteCommerce.

What is SvelteCommerce?

SvelteCommerce is an open-source ecommerce storefront built with SvelteKit.

Repository:

https://github.com/itswadesh/svelte-commerce

It includes features such as:

Server-Side Rendering (SSR)
SEO-friendly architecture
Product & Collection pages
Shopping Cart
Checkout
Customer Authentication
Responsive UI
Backend-agnostic connector architecture

Since its initial release, SvelteCommerce has been integrated with:

Litekart
Medusa
Shopify
WooCommerce

Vendure is now the latest supported backend.

Why Connectors?

One problem I've seen with many storefront implementations is that business logic becomes tightly coupled to the backend API.

For example:

Product pages call backend-specific APIs.
Cart logic depends on backend-specific responses.
Checkout flows become tied to one commerce platform.

This makes switching platforms or supporting multiple backends difficult.

Instead, SvelteCommerce uses KitCommerce Core as a common abstraction layer.

The storefront communicates only with KitCommerce Core, while connectors translate those requests into backend-specific API calls.

Architecture

                    ┌──────────────────────────┐
                    │      SvelteCommerce      │
                    │ (SvelteKit Storefront)   │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │    KitCommerce Core      │
                    │ Commerce Abstraction     │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │    Vendure Connector     │
                    │ Maps Core ↔ Vendure APIs │
                    └─────────────┬────────────┘
                                  │
                                  ▼
                    ┌──────────────────────────┐
                    │         Vendure          │
                    │ GraphQL Shop/Admin APIs  │
                    └──────────────────────────┘

Every request follows the same path:

SvelteCommerce
        ↓
KitCommerce Core
        ↓
Vendure Connector
        ↓
Vendure GraphQL APIs

The storefront never communicates with Vendure directly.

What Changed to Support Vendure?

The interesting part is what didn't change.

To support Vendure, I mainly had to:

Write GraphQL queries and mutations.
Map Vendure responses into the common commerce model.
Handle authentication and cart operations.
Register the connector within KitCommerce Core.

I didn't have to modify:

SSR
Product pages
Collection pages
Shopping cart UI
Checkout flow
Customer authentication UI
Search and filtering

Those features already worked because they rely on the common commerce interface instead of backend-specific APIs.

Integration Steps

Connecting Vendure with SvelteCommerce is straightforward.

1. Install Vendure

Set up a running Vendure instance.

2. Install the Vendure Connector

Repository:

https://github.com/misiki-in/vendure-connector

The connector acts as the bridge between KitCommerce Core and Vendure.

3. Register the Connector

Import and register the connector inside KitCommerce Core.

Once registered, all commerce operations are automatically routed through Vendure.

4. Generate API Credentials

From the Vendure Admin Dashboard, generate:

API URL
API Key / Authentication Token

5. Configure SvelteCommerce

Add the required environment variables for the connector.

6. Build and Run

Start the application and the storefront will communicate with Vendure through the connector.

Trade-offs

One lesson from supporting multiple commerce platforms is that the common data model tends to become a "lowest common denominator."

Every new backend either fits the existing model or exposes gaps that require expanding it.

In my experience, that's where most of the engineering effort goes—not writing API requests, but designing an abstraction that remains flexible without becoming overly generic.

Source Code

SvelteCommerce