medusa-store/www/apps/docs/content/storefront/roadmap.mdx

---
description: 'Learn about the different resources you need and the general steps to take while building your custom storefront that is connected to your Medusa backend.'
---

import DocCardList from '@theme/DocCardList';
import DocCard from '@theme/DocCard';
import Icons from '@theme/Icon';
import LearningPath from '@site/src/components/LearningPath';

# 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](../starters/nextjs-medusa-starter.mdx), 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.

<LearningPath pathName="storefront" />

---

## 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](../medusa-react/overview.mdx). 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](../js-client/overview.mdx) 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](https://docs.medusajs.com/api/store).

:::tip

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.

<DocCard item={{
  type: 'link',
  href: '/development/backend/configurations#admin_cors-and-store_cors',
  label: 'Set store_cors in Configurations',
  customProps: {
    icon: Icons['academic-cap-solid'],
    html: "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.

<DocCardList colSize={6} items={[
  {
    type: 'link',
    href: '/user-guide/settings/publishable-api-keys',
    label: 'Option 1: Create Using Dashboard',
    customProps: {
      icon: Icons['users-solid'],
      description: 'Learn how to create a publishable API key using the admin dashboard.'
    }
  },
  {
    type: 'link',
    href: '/development/publishable-api-keys/admin/manage-publishable-api-keys',
    label: 'Option 2: Create using APIs',
    customProps: {
      icon: Icons['academic-cap-solid'],
      description: '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.

<DocCard item={{
  type: 'link',
  href: '/development/publishable-api-keys/storefront/use-in-requests',
  label: 'Use Key in Storefront',
  customProps: {
    icon: Icons['academic-cap-solid'],
    html: '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.

<DocCard item={{
  type: 'link',
  href: '/modules/regions-and-currencies/storefront/use-regions',
  label: 'Implement Region Functionalities',
  customProps: {
    icon: Icons['academic-cap-solid'],
    html: '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.

<DocCard item={{
  type: 'link',
  href: '/modules/products/storefront/show-products',
  label: 'Display Products',
  customProps: {
    icon: Icons['academic-cap-solid'],
    html: '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.

<DocCardList colSize={6} items={[
  {
    type: 'link',
    href: '/modules/carts-and-checkout/storefront/implement-cart',
    label: 'Step 1: Implement Cart Functionalities',
    customProps: {
      icon: Icons['academic-cap-solid'],
      html: 'Learn how to implement the cart functionalities in your storefront.',
    }
  },
  {
    type: 'link',
    href: '/modules/carts-and-checkout/storefront/implement-checkout-flow',
    label: 'Step 2: Implement Checkout Flow',
    customProps: {
      icon: Icons['academic-cap-solid'],
      html: '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.

<DocCard item={{
  type: 'link',
  href: '/modules/customers/storefront/implement-customer-profiles',
  label: 'Implement Customer Profiles',
  customProps: {
    icon: Icons['academic-cap-solid'],
    html: '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.

<DocCardList colSize={6} items={[
  {
    type: 'link',
    href: '/modules/overview',
    label: 'Commerce Modules',
    customProps: {
      icon: Icons['users-solid'],
      description: 'Learn about available ecommerce features and how to use them in your storefront.'
    }
  },
  {
    type: 'link',
    href: 'https://docs.medusajs.com/api/store',
    label: 'Store API reference',
    customProps: {
      icon: Icons['academic-cap-solid'],
      description: '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.

<DocCard item={{
  type: 'link',
  href: '/plugins/overview',
  label: 'Plugins',
  customProps: {
    icon: Icons['academic-cap-solid'],
    html: 'Check out available plugins and how to integrate them in your storefront.',
  }
}} />

---

## Deploy the Storefront

:::tip

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.

<DocCard item={{
  type: 'link',
  href: '/deployments/storefront',
  label: 'Deploy Storefront',
  customProps: {
    icon: Icons['academic-cap-solid'],
    html: 'Learn how to deploy your storefront to hosting providers, such as Vercel.',
  }
}} />