Cloud Best Practices: Connect Production Storefront

In this guide, you'll learn how to allow your production storefront to send requests to your Medusa application deployed on Cloud.

Cloud and Storefront Hosting Overview#

Cloud supports hosting your storefront alongside your Medusa backend and admin dashboard when your project is set up in a monorepo structure. This allows you to deploy and manage both backend and frontend on a single platform with zero configuration.

The Project Prerequisites guide explains how to set up your Medusa application and storefront in a monorepo structure. You can then create a project that includes both the Medusa application and storefront code.

When to Host Storefront Externally#

If you can't set up your Medusa application and storefront in a monorepo structure, you can host your storefront externally using any hosting provider of your choice, such as Vercel, Netlify, or AWS.

This guide explains how to configure your externally hosted storefront to communicate with your Medusa backend on Cloud.

To send requests from your production storefront, you need to add some configurations both to it and the Medusa application deployed on Cloud. Otherwise, you'll receive an error when trying to send requests from the storefront.

The following sections list the changes to make in your Medusa application and storefront to allow sending requests from the storefront. While the guide uses the Next.js Starter Storefront as an example, the steps are generally similar for any storefront.

Changes in Your Medusa Application#

To allow your production storefront to access your Medusa application on Cloud, you need to set two Cross-Origin Resource Sharing (CORS) environment variables in your Medusa application:

STORE_CORS: The URLs of storefronts that can access your Medusa backend's /store API routes. This is a comma-separated list of URLs that is typically used as the value of the http.storeCors configuration.
AUTH_CORS: The URLs of the clients (storefront and admin) that can access the Medusa backend's /auth API routes. This is a comma-separated list of URLs that is typically used as the value of the http.authCors configuration.

For example, if your storefront is hosted at https://my-storefront.com, you can set the following environment variables in your production environment:

Code
1STORE_CORS=https://my-storefront.com2AUTH_CORS=https://my-storefront.com

If you have multiple storefronts, you can add them to the list separated by commas:

Code
1STORE_CORS=https://my-storefront.com,https://another-storefront.com2AUTH_CORS=https://my-storefront.com,https://another-storefront.com

After adding these environment variables, redeploy the environment to apply the changes.

Changes in Your Storefront#

To send requests from your storefront to your Medusa application on Cloud, you need to set two environment variables in the storefront:

MEDUSA_BACKEND_URL: The URL of your production Medusa application deployed on Cloud. For example, https://my-project.medusajs.app.

Tip: If you copy the URL from a Cloud environment's dashboard, it may contain a /app suffix. Make sure to remove it from this variable.

NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY: A publishable API key from your production Medusa application. You can create or find an existing one using the Medusa Admin.

Note: These environment variable names are used by the Next.js Starter Storefront to connect to your Medusa application. If you're using a different storefront, you may need to set different environment variables.

You can set these environment variables in your storefront's hosting provider. For example, if you're using Vercel, you can set them in the Vercel dashboard.

Then, redeploy your storefront to apply the changes.

With the changes made in the Medusa application and storefront, your storefront can now send requests to your Medusa application on Cloud.

Was this guide helpful?