One of the core goals behind SvelteCommerce has always been to keep the storefront independent of the ecommerce backend.
Rather than coupling the frontend directly to a specific commerce platform, SvelteCommerce uses a connector-based architecture. Every supported backend implements the same commerce interface, allowing the storefront to remain unchanged while different commerce engines can be plugged in as needed.
Recently, I added support for MedusaJS by building a dedicated Medusa Connector.
In this article, I'll walk through the architecture, explain how the integration works, and show how to connect MedusaJS to SvelteCommerce.
What is SvelteCommerce?
SvelteCommerce is an open-source ecommerce storefront built with SvelteKit.
GitHub:
https://github.com/itswadesh/svelte-commerce
Some of its features include:
- Server-Side Rendering (SSR)
- SEO-friendly architecture
- Responsive storefront
- Shopping cart and checkout
- Customer authentication
- Product and collection pages
- Backend-agnostic architecture
- Production-ready codebase
SvelteCommerce currently supports multiple commerce platforms through connectors, including:
- MedusaJS
- Vendure
- Shopify
- WooCommerce
- Litekart
Why Build a Medusa Connector?
MedusaJS is one of the most popular open-source headless commerce platforms available today. It provides everything needed to power an ecommerce backend, including:
- Products
- Collections
- Customers
- Carts
- Orders
- Inventory
- Regions
- Payments
- Store APIs
Rather than making SvelteCommerce communicate directly with Medusa's APIs, all commerce requests flow through KitCommerce Core, which provides a standardized commerce interface.
The Medusa Connector translates that common interface into Medusa Store API requests.
This keeps the storefront completely independent of backend implementation details.
Architecture
┌──────────────────────────┐
│ SvelteCommerce │
│ (SvelteKit Storefront) │
└─────────────┬────────────┘
│
▼
┌──────────────────────────┐
│ KitCommerce Core │
│ Commerce Abstraction │
└─────────────┬────────────┘
│
▼
┌──────────────────────────┐
│ Medusa Connector │
│ Maps Core ↔ Medusa APIs │
└─────────────┬────────────┘
│
▼
┌──────────────────────────┐
│ MedusaJS │
│ Store APIs │
└──────────────────────────┘
Every request follows the same path:
SvelteCommerce
↓
KitCommerce Core
↓
Medusa Connector
↓
Medusa Store APIs
This architecture allows the frontend to stay completely backend agnostic.
How It Works
Whenever a customer interacts with the storefront:
- SvelteCommerce sends a commerce request.
- KitCommerce Core receives the request.
- The Medusa Connector translates the request into Medusa Store API calls.
- Medusa processes the request and returns the response.
- The connector maps the response into the common commerce model.
- SvelteCommerce renders the result.
Because all backend-specific logic lives inside the connector, the storefront never depends on Medusa directly.
Getting Started
Step 1 — Install MedusaJS
Create a MedusaJS backend and complete the initial setup.
Make sure the backend is running and the Admin Dashboard is accessible.
Step 2 — Install the Medusa Connector
Install the Medusa Connector package.
Repository:
https://github.com/misiki-in/medusa-connector
The connector is responsible for translating commerce operations between KitCommerce Core and Medusa.
Step 3 — Register the Connector
Import and register the Medusa Connector inside KitCommerce Core Services.
Once registered, all storefront operations—including products, collections, customer authentication, carts, and checkout—are automatically routed through the connector.
Step 4 — Get Your Medusa Configuration
From your Medusa backend, you'll need the following values:
MEDUSA_API_URLPUBLISHABLE_API_KEYREGION_ID
These allow SvelteCommerce to communicate securely with your Medusa Store APIs.
Step 5 — Configure SvelteCommerce
Add the following environment variables:
MEDUSA_API_URL="http://localhost:9000"
PUBLISHABLE_API_KEY="pk_xxxxxxxxxxxxxxxxx"
REGION_ID="reg_xxxxxxxxxxxxxxxxx"
Once configured, SvelteCommerce is ready to communicate with Medusa.
Step 6 — Build and Run
Build the project and start the application.
Your storefront will now retrieve products, collections, customers, carts, and orders directly from Medusa through the connector.
Why This Architecture?
One of the biggest advantages of using connectors is that the storefront doesn't have to change when switching ecommerce platforms.
Backend Agnostic
Only the connector changes.
The storefront remains exactly the same.
Reusable Frontend
The same SvelteCommerce application can work with multiple commerce platforms by simply replacing the connector.
Easier Maintenance
Commerce logic stays centralized inside KitCommerce Core, while backend-specific implementations remain isolated inside connector packages.
Better Developer Experience
Developers can continue building with SvelteKit while choosing whichever commerce platform best fits their project.
Open Source
Both projects are open source.
SvelteCommerce
https://github.com/itswadesh/svelte-commerce
Medusa Connector
https://github.com/misiki-in/medusa-connector
Contributions, feature requests, issues, and feedback are always welcome.
Final Thoughts
The connector architecture has made it possible to support multiple commerce platforms without changing the storefront itself.
Adding Medusa support mainly involved implementing API mappings inside the connector while leaving the storefront, routing, SSR, cart, checkout, and authentication untouched.
If you're building a SvelteKit storefront with MedusaJS, I'd love for you to give it a try and share your feedback.
Resources
SvelteCommerce
https://github.com/itswadesh/svelte-commerce
Medusa Connector
https://github.com/misiki-in/medusa-connector
MedusaJS
Top comments (0)