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.
You can instead follow this recipe that will guide you through implementing features in your storefront step-by-step.
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.
Learn how to set the store_cors option in your Medusa backend's configurations.
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.
Learn how to create a publishable API key using the admin dashboard.
Learn how to create a publishable API key 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.
Learn how to use the publishable API key in your storefront.
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.
Learn how to implement region functionalities in your storefront.
Displaying Products
Customers should be able to browse products in your storefront and view their details.
Learn how to list products in your store and show a single product’s detail.
Implement Cart and Checkout
Customers should be able to add products to cart and go through the checkout flow.
Learn how to implement the cart functionalities in your storefront.
Learn how to implement the checkout flow in your storefront.
Implement Customer Profiles
Customers should be able to register, log-in, edit their profile, and view their orders.
Learn how to implement customer profile functionalities in your storefront.
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.
Learn about available ecommerce features and how to use them in your storefront.
Learn about available REST API routes that you can use 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.
Check out available plugins and how to integrate them in your storefront.
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.
Learn how to deploy your storefront to hosting providers, such as Vercel.