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.

Overview​

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.

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

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 to the List Products endpoint, only products associated with that sales channel will be retrieved.

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.

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 page helpful?
© 2023 Medusa, Inc. All rights reserved.