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.
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.
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.
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.
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.