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 only hosts Medusa applications. It doesn't support hosting your storefronts. Instead, you can use hosting providers like Vercel to host your storefronts.

If you're using the Next.js Starter Storefront, you can follow the Deploy to Vercel guide to deploy your storefront.

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.

This guide lists 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 server'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 server'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?