docs: updates for storefront in cloud (#14491)

* docs: updates for storefront in cloud

* comment-out pnpm

* fix broken link

* npm prerequisites

* Update www/apps/cloud/app/storefront/page.mdx

Co-authored-by: Stevche Radevski <sradevski@live.com>

* remove global cdn

---------

Co-authored-by: Stevche Radevski <sradevski@live.com>
This commit is contained in:
Shahed Nasser
2026-01-08 17:39:19 +02:00
committed by GitHub
co-authored by Stevche Radevski
parent bb599a26de
commit baaee11114
28 changed files with 855 additions and 220 deletions
+28 -20
View File
@@ -10,11 +10,11 @@ In this guide, you'll learn how to access your Cloud [deployment](../page.mdx) f
You can only access a deployment of an [environment](../../environments/page.mdx) once its status is "Live". A live deployment means that your Medusa application is successfully built and is publicly accessible. You can't access previous deployments or deployments that are still in the "Building" or "Failed" status.
You can access the live deployment's Medusa Admin and send requests to its API routes using the deployment's environment URL.
You can access the live deployment's Medusa Admin, send requests to its API routes, and access its storefront (if applicable) using the deployment's environment URL.
---
## Find Environment's URL
## Find Backend and Admin's URL
<Note>
@@ -22,30 +22,22 @@ For preview environments, refer to the [Preview Environments](../../environments
</Note>
An environment's URL is in the format `<subdomain>.medusajs.app`, where `<subdomain>` is the subdomain you set either when [creating its project](../../projects/page.mdx#create-a-project) or when [creating the environment](../../environments/long-lived/page.mdx#create-a-long-lived-environment).
An environment's backend URL is in the format `<subdomain>.medusajs.app`, where `<subdomain>` is the subdomain you set either when [creating its project](../../projects/page.mdx#create-a-project) or when [creating the environment](../../environments/long-lived/page.mdx#create-a-long-lived-environment).
You can also find the URL of a deployment's environment through the Cloud dashboard:
You can also find the URL of a deployment's backend through the Cloud dashboard:
1. Select a project from the [organization's dashboard](../../organizations/page.mdx#organization-dashboard).
2. In the project's dashboard, find the URL in the environment's card under its name. For example, find the production URL in the Production environment card. You can copy the URL by clicking the copy icon next to it.
2. In the project's dashboard, find the backend URL in the environment's card under the "Backend" title. You can copy the URL by clicking the copy icon next to it.
<Note title="Why are there two URLs?">
Aside from the subdomain you set when [creating the environment](../../environments/long-lived/page.mdx#create-a-long-lived-environment), Medusa also provides a unique, randomly generated URL for each environment. Both of these URLs point to the same deployment.
</Note>
![URL of environment in its card under the environment's name](https://res.cloudinary.com/dza7lstvk/image/upload/v1750157464/Cloud/CleanShot_2025-06-17_at_13.50.38_2x_nfxy1t.png)
![URL of environment in its card under the environment's name](https://res.cloudinary.com/dza7lstvk/image/upload/v1767791499/Cloud/CleanShot_2026-01-07_at_15.11.24_2x_xj4vwr.png)
3. You can also click on the environment's name to open its dashboard, where you'll find the URL under the environment's name.
![URL of environment in its dashboard under the environment's name](https://res.cloudinary.com/dza7lstvk/image/upload/v1750081257/Cloud/CleanShot_2025-06-16_at_16.40.37_2x_vxupew.png)
![URL of environment in its dashboard under the environment's name](https://res.cloudinary.com/dza7lstvk/image/upload/v1767791582/Cloud/CleanShot_2026-01-07_at_15.12.50_2x_wca8gl.png)
---
### Access the Deployment's Medusa Admin
## Access the Deployment's Medusa Admin
To access the Medusa Admin of a live deployment, click on [the environment's URL](#find-environments-url), or navigate to `<environment-url>/app`. For example, if your environment's URL is `my-project.medusajs.app`, navigate to `my-project.medusajs.app/app`.
To access the Medusa Admin of a live deployment, click on [the environment's URL](#find-backend-and-admins-url), or navigate to `<environment-url>/app`. For example, if your environment's URL is `my-project.medusajs.app`, navigate to `my-project.medusajs.app/app`.
You can then log in either using:
@@ -63,9 +55,9 @@ If you don't see the "Log in with Medusa Cloud" button on the Medusa Admin log i
---
## Send Requests to the Deployment
## Send Requests to the Deployed Medusa Backend
You can send requests to a live deployment's API routes using the deployment's [environment URL](#find-environments-url).
You can send requests to a live deployment's Medusa backend using the deployment's [environment URL](#find-backend-and-admins-url).
For example, to check the health of the live deployment, you can send a `GET` request to the `/health` endpoint:
@@ -73,7 +65,7 @@ For example, to check the health of the live deployment, you can send a `GET` re
curl https://my-project.medusajs.app/health
```
Where `https://my-project.medusajs.app` is the environment URL of the deployment.
Where `https://my-project.medusajs.app` is the URL of the environment's Medusa backend.
---
@@ -82,3 +74,19 @@ Where `https://my-project.medusajs.app` is the environment URL of the deployment
Medusa doesn't support SSH access to the server instance of a deployment. However, you can still access the server's [runtime and build logs](../../logs/page.mdx) to debug issues in your application.
If this isn't sufficient for your use case, you can contact support to discuss alternatives.
---
## Find Storefront URL
If you deployed a storefront alongside your Medusa backend, you can access it using the storefront URL.
By default, storefronts are deployed at the `medusajs.site` subdomain. The domain prefix is the same as the Medusa backend's subdomain. For example, if your backend is at `my-store.medusajs.app`, your storefront will be at `my-store.medusajs.site`.
You can find the storefront URL:
1. Select a project from the [organization's dashboard](../../organizations/page.mdx#organization-dashboard).
2. In the project's dashboard, find the storefront URL in the environment's card under the "Storefront" title. You can copy the URL by clicking the copy icon next to it.
3. Click the URL to open the storefront in a new browser tab.
You can also set up a custom domain for your storefront. Learn more in the [Storefront Custom Domain](../../storefront/page.mdx#storefront-custom-domain) guide.
+26 -24
View File
@@ -11,12 +11,14 @@ In this guide, you'll learn about deployments in Cloud, how they're created, and
## Deployments Overview
Each [environment](../environments/page.mdx) has at least one deployment, which is publicly accessible at the [environment's URL](./access/page.mdx#find-environments-url).
Each [environment](../environments/page.mdx) has at least one deployment, which is publicly accessible at the [environment's URL](./access/page.mdx#find-backend-and-admins-url).
A deployment is created from the latest source code of an [environment](../environments/page.mdx)'s branch. An environment can have only one live deployment at a time.
The latest deployment of an environment is the live version of that environment, unless you [redeploy a previous deployment](#redeploy-a-deployment).
If you deployed both the Medusa backend and storefront in an environment, each deployment refers to the backend and storefront. The deployment will also show the status of both the backend and storefront.
---
## How are Deployments Created?
@@ -29,6 +31,8 @@ For short-lived preview environments, Medusa creates a new environment and deplo
## Build Process for Deployments
### Medusa Application Only
Before deploying your application on Cloud, Medusa runs the `build` script defined in your project's `package.json` file, which must run the `medusa build` command, among other build steps you may have.
For example, your `build` script may look like this:
@@ -47,9 +51,17 @@ You can replace `npm run other-build-steps` with the appropriate command for you
</Note>
### What Gets Deployed?
### Medusa Application with Storefront
Medusa deploys the contents of the `.medusa/server` directory created by the [build process](!docs!/learn/build). It includes the compiled JavaScript files in your project, the production build of the admin dashboard, and other necessary files to run your Medusa application in production.
If you're deploying both a Medusa application and a storefront on Cloud, Medusa will run the:
1. The `build` command defined in the backend's `package.json` file, which must run the `medusa build` command.
2. The build command relevant to the storefront, depending on the framework you're using. For example, if you're using Next.js for your storefront, Medusa will run the `next build` command in the storefront's directory.
- Medusa currently doesn't support custom build scripts for storefronts.
### What Gets Deployed in the Medusa Application?
Medusa deploys the contents of the `.medusa/server` directory of the Medusa application. This directory is created by the [build process](!docs!/learn/build). It includes the compiled JavaScript files in your project, the production build of the admin dashboard, and other necessary files to run your Medusa application in production.
<Note>
@@ -94,17 +106,10 @@ You can find the deployments for an environment in the project and environment d
For example, to find the deployments for the Production environment:
1. [Go to its project's dashboard](../projects/page.mdx#open-project-dashboard).
2. You can go to the latest Production deployment's details by clicking the "Latest Deployment" link in the Production environment card.
2. Click on the "Production" environment card.
3. You'll find the deployments in the "Deployments" table on the environment's dashboard.
![Production environment card in the Cloud dashboard with the "Latest Deployment" link prominently highlighted, providing quick access to view details about the most recent deployment including status, commit information, and deployment logs](https://res.cloudinary.com/dza7lstvk/image/upload/v1750146946/Cloud/CleanShot_2025-06-17_at_10.54.05_2x_ksw4nk.png)
3. To find a list of all deployments, click on the "Production" environment card to open the environment's dashboard.
- The "Latest update" card shows details about the latest deployment.
- The "Deployments" card shows the list of all previous deployments.
![Production environment details page with deployment cards highlighted](https://res.cloudinary.com/dza7lstvk/image/upload/v1750151060/Cloud/CleanShot_2025-06-17_at_10.57.49_2x_wqrfzf.png)
The last step applies to all environments in your project, including custom environments (like Staging) and preview environments.
![Production environment details page with deployment cards highlighted](https://res.cloudinary.com/dza7lstvk/image/upload/v1767790909/Cloud/CleanShot_2026-01-07_at_15.01.37_2x_dixi9u.png)
---
@@ -115,22 +120,19 @@ You'll often need to check a deployment's details, such as its status, commit in
To view a deployment's details:
1. [Go to its project's dashboard](../projects/page.mdx#open-project-dashboard).
2. If you're looking for the latest deployment:
- Click the "Latest Deployment" link in its environment's card.
3. If you're looking for an older deployment:
- Click on its environment's card to open its dashboard.
- In the "Deployments" card, click on the deployment you want to view.
2. Click on the "Deployments" tab.
3. Click on the deployment in the deployments table.
This will open the deployment's details page, where you can also see the deployment's commit at the top of the page.
On the deployment details page, you'll find:
![Deployment details page with key sections highlighted](https://res.cloudinary.com/dza7lstvk/image/upload/v1750147821/Cloud/CleanShot_2025-06-17_at_11.08.58_2x_ea1l8s.png)
![Deployment details page with key sections highlighted](https://res.cloudinary.com/dza7lstvk/image/upload/v1767791012/Cloud/CleanShot_2026-01-07_at_15.02.49_2x_aiatds.png)
1. **Commit**: The commit that the deployment was created from. This is the page's title.
2. **Status**: The current [status](#deployment-statuses-and-lifecycle) of the deployment. For example, "Live" or "Build Failed". You can see it next to the "Redeploy" button.
3. **Author**: The GitHub user who pushed the commit that created the deployment. You can see the user name when you hover over the user's avatar.
4. **Build Logs**: This section shows the logs from the build process. They are useful to understand why a deployment failed. Learn more in the [Logs](../logs/page.mdx) guide.
4. **Activity**: This section shows the build logs for the backend and storefront (if applicable). They are useful to understand why a deployment failed. Learn more in the [Logs](../logs/page.mdx) guide.
### Switch Between Deployments
@@ -141,7 +143,7 @@ To switch to a different deployment:
1. Click on the deployment's commit at the top of the Cloud dashboard, next to the environment's name.
2. Choose the deployment you want to switch to from the dropdown.
![Deployment switcher at the top of the deployment details page](https://res.cloudinary.com/dza7lstvk/image/upload/v1750148493/Cloud/CleanShot_2025-06-17_at_11.20.16_2x_jegncv.png)
![Deployment switcher at the top of the deployment details page](https://res.cloudinary.com/dza7lstvk/image/upload/v1767791120/Cloud/CleanShot_2026-01-07_at_15.05.15_2x_tblb0s.png)
This will change the view to the selected deployment and you'll see its details and logs.
@@ -244,7 +246,7 @@ If a deployment is stuck at a status like "Building" or "Deploying" for a long t
## Access Live Deployment
Once a deployment's status is "Live", you can access its Medusa Admin and send requests to its API routes.
Once a deployment's status is "Live", you can access its Medusa Admin, send requests to its API routes, and access its storefront (if applicable).
Learn more in the [Access Live Deployment](./access/page.mdx) guide.
@@ -283,7 +285,7 @@ To redeploy a deployment:
1. [Go to the deployment's details page](#find-deployment-details).
2. Click the "Redeploy" button at the top right of the page.
![Redeploy button highlighted on the deployment details page](https://res.cloudinary.com/dza7lstvk/image/upload/v1750156363/Cloud/CleanShot_2025-06-17_at_13.31.17_2x_i6lfit.png)
![Redeploy button highlighted on the deployment details page](https://res.cloudinary.com/dza7lstvk/image/upload/v1767791243/Cloud/CleanShot_2026-01-07_at_15.07.12_2x_popu4f.png)
This will trigger the redeployment process for the selected deployment. The deployment will go through [the same lifecycle](#deployment-statuses-and-lifecycle) as a new deployment.
@@ -308,7 +310,7 @@ To change the deployment rules for an environment:
3. Click on the "Deployment rules" tab in the sidebar.
4. You'll find a `branch` rule. You can edit it by clicking the <InlineIcon Icon={EllipsisHorizontal} alt="three-dots" /> icon and choosing "Edit" from the dropdown.
![Deployment rules section in the environment's settings tab](https://res.cloudinary.com/dza7lstvk/image/upload/v1750171235/Cloud/CleanShot_2025-06-17_at_17.40.13_2x_v0vn1k.png)
![Deployment rules section in the environment's settings tab](https://res.cloudinary.com/dza7lstvk/image/upload/v1767791296/Cloud/CleanShot_2026-01-07_at_15.08.11_2x_f3pkm1.png)
5. In the side window that opens, you can change the branch that the environment is connected to. For example, you can change it from `main` to `staging` to create a new deployment every time you push a commit to the `staging` branch.
6. Click "Save" to apply the changes.