Build modern ecommerce with Svelte and Medusa

Introduction

Medusa is an open-source headless commerce engine built for developers. The engine gives you the primitives to create amazing digital commerce experiences. Customization and flexibility is of highest priority and is enabled through an open-source foundation and unique plugin architecture. Additionally, Medusa solves common pain points of most monolithic ecommerce solutions such as multi-regional support, flexibility in the tech stack, automated exchange handling and more.

The headless element of Medusa likewise gives you the flexibility to build or add any frontend application or channel of your preference on top of Medusa. In this tutorial, we will set up a Medusa powered store with a Svelte frontend using our newly built Svelte starter.

Svelte is a frontend framework similar to React and VueJS which has gained increasing popularity in recent years. Main reason for the traction has been Svelte ability to improve frontend performance by compiling the web components (HTML, CSS and Javascript) into small standalone Javascript modules that are run at build time.

In this tutorial the focus will be on the Svelte starter. If you are interested in using Medusa with other frameworks instead, you can check out our Next.js and Gatsby starters.

Prerequisites

This tutorial requires you to have a Medusa store engine running locally on your machine. Get started quickly using our CLI:

# Install our CLI
npm install -g @medusajs/medusa-cli

# Create a new project
medusa new my-medusa-store

# Navigate to your project and start your server locally
cd my-medusa-store
medusa develop

Ensure that Medusa is running on port 9000 to avoid potential CORS issues when connecting the your Svelte application.

Installation and usage

To get started with the Svelte starter, launch a new terminal tab on your machine and execute the following command:

npx degit vickywane/svelte-starter-medusa my-storefront

The commands will scaffold a Svelte application for you called my-storefront.

Next, navigate to your Svelte project, install the dependencies and launch your project:

# Navigate to your project
cd my-storefront

# Install all dependencies
npm install

# Start up your Svelte applcation
npm run dev

Ensure that your Svelte application is running on port 8000. Again, to prevent CORS issues from occurring.

Go to http://localhost:8000 and view your newly create storefront. To play with the starter, you are required to add some initial data to your Medusa store. If you haven't done this already, navigate to your Medusa project and run:

# Will seed your database with some predefined dummy data
npm run seed

# start the server with new data
npm start

Now, if you refresh your Svelte application, you should see a product displayed on the front page. The out-of-the-box functionality in the starter allows you to add the product to your cart and complete a checkout flow.

‍

What’s Next?

As a result of following this tutorial, you are provided with the foundation to built an amazing digital commerce experience using the Svelte framework. Browse through the official Medusa documentation to learn more about extending your store engine with custom functionality and plugins.

If you stumble upon issues, or have questions, feel free to join our Discord and get in touch with the Medusa engineering team.