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
@@ -52,10 +52,10 @@ To create a long-lived environment:
1. In the [project's dashboard](../../projects/page.mdx#open-project-dashboard), click on the "Add environment" button at the top right.
2. In the side window that opens:
- Enter the name of the environment. For example, `Staging`.
- Select the branch you want to associate with this environment. For example, `staging`.
- **Environment name**: Enter the name of the environment. For example, `Staging`.
- **Branch**: Select the branch you want to associate with this environment. For example, `staging`.
- If you don't see the branch you want to use, refresh the page to load the latest branches from your repository.
- Set the custom subdomain for the environment. All environments are subdomains of `medusajs.app`. So, if you set the subdomain to `staging-my-project`, the environment's URL will be `staging-my-project.medusajs.app`.
- **Custom subdomain**: Set the custom subdomain for the Medusa application (and, subsequently, storefront). Medusa applications are a subdomain of `medusajs.app`, and their storefront is a subdomain of `medusajs.site`.
- Refer to the [Subdomain Restrictions](../../projects/page.mdx#subdomain-restrictions) guide for reserved subdomains and restrictions.
3. Once you're done, click the "Create" button.
@@ -67,14 +67,14 @@ The created environment will appear in the [project's dashboard](../../projects/
After creating the environment, Medusa will automatically trigger a deployment for the environment using the associated branch (for example, `staging`). This includes:
- Deploying the environment from the associated branch.
- Deploying the Medusa application and storefront (if applicable) from the associated branch.
- Setting up the database and resources for the environment. These are different from the resources of other environments.
After that, Medusa will automatically deploy the environment whenever you push a new commit to the associated branch.
### Create Medusa Admin User in Environment
After the environment is deployed, you can log in either with:
After the environment is deployed, you can log in to the Medusa Admin either with:
1. Your Cloud account by clicking the "Log in with Medusa Cloud" button. A user will be created in the Medusa application with the same email as your Cloud account.
2. The email and password you set using environment variables.
@@ -117,7 +117,7 @@ If you added the initial admin user's email and password environment variables,
This will redeploy the environment's live deployment with the new admin user credentials.
![Redeploy button at the top right of the environment's dashboard](https://res.cloudinary.com/dza7lstvk/image/upload/v1750081204/Cloud/CleanShot_2025-06-16_at_16.39.44_2x_d3yij6.png)
![Redeploy button at the top right of the environment's dashboard](https://res.cloudinary.com/dza7lstvk/image/upload/v1767787939/Cloud/CleanShot_2026-01-07_at_14.11.56_2x_bw5p1w.png)
Then, wait for the deployment to finish. You can check its status in the "Deployments" section. Once it's deployed, you can [access the environment](#access-deployed-environment) using its URL.
@@ -143,17 +143,25 @@ To open an environment's dashboard:
This will open the environment's dashboard. You can see the environment's name at the top of the Cloud dashboard.
![Environment dashboard with the name at the top left](https://res.cloudinary.com/dza7lstvk/image/upload/v1749813349/Cloud/CleanShot_2025-06-13_at_14.14.32_2x_ttqg3h.png)
![Environment dashboard with the name at the top left](https://res.cloudinary.com/dza7lstvk/image/upload/v1767787987/Cloud/CleanShot_2026-01-07_at_14.12.59_2x_gocehp.png)
### Find Environment Details
On the environment's dashboard, you can find the following details:
![Environment dashboard with sections highlighted](https://res.cloudinary.com/dza7lstvk/image/upload/v1749814360/Cloud/CleanShot_2025-06-13_at_14.27.24_2x_rhpaga.png)
![Environment dashboard with sections highlighted](https://res.cloudinary.com/dza7lstvk/image/upload/v1767788225/Cloud/CleanShot_2026-01-07_at_14.14.22_2x_o0at9s.png)
1. **Environment URL**: The URL to access the environment. You can find it below the environment's name.
2. **Environment Status**: The current status of the environment, such as "Live" or "Deploying". You can find it at the top right of the environment's dashboard.
3. **Environment Deployments**: The list of deployments for the environment, including the latest deployment. You can find it in the "Deployments" section of the environment's dashboard.
1. **Environment Medusa Backend URL**: The URL to access the environment. You can find it below the environment's name.
2. **Environment Storefront URL**: The URL to access the environment's storefront. You can find it below the "Storefront" title in the environment's card.
3. **Medusa Application's Deployment Status**: The current status of the latest Medusa application deployment, such as "Live" or "Deploying". You can find it next to the "Backend" title in the environment's card.
4. **Storefront's Deployment Status**: The current status of the latest storefront deployment, such as "Live" or "Deploying". You can find it next to the "Storefront" title in the environment's card.
5. **Environment Deployments**: The list of deployments for the environment, including the latest deployment. You can find it in the "Deployments" section of the environment's dashboard.
<Note title="Why are there two Medusa Backend 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>
### Switch Environments
@@ -164,15 +172,15 @@ To switch to a different environment:
1. Click on the <InlineIcon Icon={ChevronUpDown} alt="switch environment" /> icon next to the environment's name at the top of the Cloud dashboard.
2. Choose the environment you want to switch to from the dropdown.
![Environment switcher dropdown at the top of the dashboard](https://res.cloudinary.com/dza7lstvk/image/upload/v1749815237/Cloud/CleanShot_2025-06-13_at_14.46.54_2x_j4848b.png)
![Environment switcher dropdown at the top of the dashboard](https://res.cloudinary.com/dza7lstvk/image/upload/v1767788275/Cloud/CleanShot_2026-01-07_at_14.17.45_2x_nkemhm.png)
This will change the view to the selected environment, and you'll see its details, logs, and settings.
---
## View Environment Logs
## View Environment Build Logs
You can view build and runtime logs for an environment in the "Logs" section of the environment's dashboard. These logs help you debug issues in your application.
You can view runtime logs for an environment in the "Logs" section of the environment's dashboard. These logs help you debug issues in your application.
Learn more in the [Logs guide](../../logs/page.mdx).
@@ -180,7 +188,7 @@ Learn more in the [Logs guide](../../logs/page.mdx).
## Manage Environment Variables
In the environment's "Settings" tab, you can manage the environment variables for the environment. Environment variables are key-value pairs that store sensitive information, such as API keys, or configurations that your application needs to run.
In the environment's "Settings" tab, you can manage the environment variables for the environment's Medusa application and storefront. Environment variables are key-value pairs that store sensitive information, such as API keys, or configurations that your application needs to run.
Learn how to manage environment variables in the [Environment Variables](../environment-variables/page.mdx) guide.
@@ -234,6 +242,4 @@ You can delete any environment in your project, except for the Production enviro
To delete an environment:
1. In the environment's dashboard, click on the "Settings" tab.
2. Click the "Delete Environment" button.
![Delete environment button in the environment's settings tab](https://res.cloudinary.com/dza7lstvk/image/upload/v1749816910/Cloud/CleanShot_2025-06-13_at_15.14.50_2x_qm8hfi.png)
2. Click the "Delete" button.