Skip to main content
Skip to main content

Build Your Own Storefront Roadmap

In this document, you’ll learn about the different resources you need and the general steps to take while building your custom storefront that's connected to your Medusa backend.


Although Medusa provides a Next.js Starter Template, you have full freedom in how you choose to build your storefront. This includes anything from what framework you choose to what functionalities you choose to include.

This guide provides a roadmap that can guide you into how you can build your own storefront, regardless of what tools you’re using.

You can instead follow this recipe that will guide you through implementing features in your storefront step-by-step.

Create a Custom StorefrontLearn how to create a custom storefront with your preferred language or framework.
Choose your client
Set CORS configurations in Backend
Create a Publishable API Key
Use Publishable API Key
Add Region Selection
Display Products
Implement Cart Functionalities
Implement Checkout Flow
Implement Customer Profiles
More Commerce Functionalities

Connect to the Backend

The storefront connects to the backend to retrieve and process data. You can use different tools or libraries when connecting your storefront to the backend.

  • For React-based storefronts: you can use Medusa React. It provides you with the necessary hooks to retrieve or manipulate data on your backend.
  • For JavaScript frameworks: you can use Medusa’s JavaScript Client in any JavaScript framework. This NPM package facilitates interacting with the backend’s REST APIs.
  • For other frontend technologies: you can interact directly with the Medusa backend by sending requests to its Store REST APIs.

In the store how-to guides that are available throughout the documentation, you’ll see snippets for all of these different options, which aims to facilitate your development.

Setting Cross-Origin Resource Sharing Configuration

Your Medusa backend uses Cross-Origin Resource Sharing (CORS) to ensure that only the hosts you specify can access your backend’s resources. Make sure to set your Medusa backend’s store_cors option to your storefront’s URL.

During development, its value would typically be something like localhost:8000 or any other port you’re using for your storefront project. For production, its value would be the public URL of the storefront. To make the development process easier, you can manage that using environment variables.

Creating a Publishable API Key

Publishable API Keys are used to scope API requests to defined resources, such as sales channels. By using a publishable API key in your request, you avoid the need to pass the sales channel(s) of your storefront in every request, which can be error-prone.

Also, when you're using Medusa's JS or React clients, you can pass the publishable API key when you first initialize the clients and it will be appended to all requests you send.

For example, you can create a publishable API key and associate it with one or more sales channels. Then, when you pass the publishable API key in the header of the request to the List Products API Route, only products associated with that sales channel will be retrieved. The alternative would be to pass the sales channels as query parameters to the request.

There are two ways to create a publishable API Key: either using the admin dashboard, which requires the admin plugin to be installed on your Medusa backend, or using the Admin REST APIs.

After creating the publishable API key and associating it with sales channels, you can pass it in the header of your requests to Store API Routes.

Implement the Functionalities

This section will briefly touch upon some of the basic functionalities that are recommended to be implemented in your storefront, with guides that explain how to implement them.

Regions Selection

Regions allow businesses to serve customers globally. On a storefront, the customer should be able to select their region.

Changing the region may also change the currency, pricing, discounts, and available shipping and payment options based on the store's configurations.

Displaying Products

Customers should be able to browse products in your storefront and view their details.

Implement Cart and Checkout

Customers should be able to add products to cart and go through the checkout flow.

Implement Customer Profiles

Customers should be able to register, log-in, edit their profile, and view their orders.

More Functionalities

Medusa’s backend provides much more functionalities, such as allowing customers to request returns, handle order edits, or request swaps. It all depends on what functionalities you want to implement in your storefront.

Integrating Plugins

Some plugins that you install on your backend require implementing storefront User Interface (UI). For most Medusa’s official plugins, you can find guidance on how to do that in its designated documentation.

Deploy the Storefront


Make sure to deploy your backend before you deploy your storefront.

Once you finish building your storefront, you can deploy it on any hosting. Although the deployment process depends on your hosting provider of choice, the deployment guides of Medusa's starter storefronts may provide some guidance in your process.

Was this section helpful?