Build modern ecommerce with Svelte and Medusa
Published: 2021-12-13 09:24:27

---
title: Build modern ecommerce with Svelte and Medusa
published: true
description: A walkthrough of how to set up an ecommerce store with Svelte as storefront and Medusa as commerce engine.
tags: 
cover_image: https://res.cloudinary.com/dkfptto8m/image/upload/v1639387825/blog/Frame_43.png
---

## Introduction

[Medusa](https://www.medusajs.com) 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](https://svelte.dev/) is a frontend framework similar to [React](https://reactjs.org/) and [VueJS](https://vuejs.org/) 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](https://github.com/medusajs/nextjs-starter-medusa) and [Gatsby](https://github.com/medusajs/gatsby-starter-medusa-simple) starters.

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

```bash
# 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:

```bash
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:

```bash
# 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:

```bash
# 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.