64c4c828b6
### What Updated the Install Command in the Vercel deployment section to `npm install` instead of `npm run build`. Closes #9264 ### Why To ensure users have the correct installation instructions for deploying Medusa Admin on Vercel. ### How Replaced the Install Command in the documentation. ### Testing No formal testing was performed for this documentation update, as it addresses a minor typo.
151 lines
4.1 KiB
Plaintext
151 lines
4.1 KiB
Plaintext
---
|
||
sidebar_label: "Vercel"
|
||
---
|
||
|
||
import { Prerequisites } from "docs-ui"
|
||
|
||
export const metadata = {
|
||
title: `Deploy Medusa Admin to Vercel`,
|
||
}
|
||
|
||
# {metadata.title}
|
||
|
||
In this document, you’ll learn how to deploy the Medusa Admin to [Vercel](https://vercel.com).
|
||
|
||
<Note title="Important">
|
||
|
||
As Medusa v2 is still in active development, it's highly recommended not to deploy it for production purposes. The deployment process may also change.
|
||
|
||
</Note>
|
||
|
||
---
|
||
|
||
<Prerequisites items={[
|
||
{
|
||
text: "Medusa application’s codebase hosted on GitHub repository.",
|
||
link: "!docs!"
|
||
},
|
||
{
|
||
text: "Deployed Medusa application.",
|
||
link: "../../page.mdx#medusa-application"
|
||
},
|
||
]} />
|
||
|
||
## 1. Configure Admin in Medusa
|
||
|
||
In `medusa-config.js`, set the following admin configuration:
|
||
|
||
```js title="medusa-config.js"
|
||
module.exports = defineConfig({
|
||
// ...
|
||
admin: {
|
||
disable: process.env.DISABLE_MEDUSA_ADMIN === "true",
|
||
backendUrl: process.env.MEDUSA_BACKEND_URL,
|
||
path: process.env.MEDUSA_ADMIN_PATH,
|
||
},
|
||
})
|
||
```
|
||
|
||
Where:
|
||
|
||
- You set `disable` to the environment variable `DISABLE_MEDUSA_ADMIN`. In the deployed Medusa application, you set the environment variable’s value to `true` to disable the admin, and when deploying the admin you set it to `false`.
|
||
- `backendUrl` will be the URL of the deployed Medusa backend.
|
||
- `path` is the base path of the admin, which is `/app` by default. When you set the environment variable `MEDUSA_ADMIN_PATH` later while deploying the admin, you’ll set it to `/`.
|
||
|
||
---
|
||
|
||
## 2. Add Vercel Rewrite
|
||
|
||
Create the file `vercel.json` in the root directory of your Medusa application with the following content:
|
||
|
||
```json title="vercel.json"
|
||
{
|
||
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 3. Create Vercel Project
|
||
|
||
<Note>
|
||
|
||
Push all changes you’ve made in the previous step to the GitHub repository before proceeding.
|
||
|
||
</Note>
|
||
|
||
To create a Vercel project, on your Vercel dashboard:
|
||
|
||
1. Click on the Add New button at the top right.
|
||
2. Choose Project from dropdown.
|
||
3. In the list of GitHub repository shown, find the GitHub repository and click its Import button.
|
||
4. This shows a form to configure the project:
|
||
1. Choose Other for the Framework Preset field.
|
||
2. Keep the root directory to `.`
|
||
3. Expand the Build and Output Settings section:
|
||
- Set the Build Command field to the following:
|
||
|
||
```bash npm2yarn
|
||
npm run build
|
||
```
|
||
|
||
- Set the Output Directory field to `build`.
|
||
- Set the Install Command field to the following:
|
||
|
||
```bash npm2yarn
|
||
npm install
|
||
```
|
||
|
||
4. Expand the Environment Variables section and add the following variables:
|
||
|
||
```bash
|
||
DISABLE_MEDUSA_ADMIN=false
|
||
MEDUSA_BACKEND_URL = # URL of deployed Medusa application
|
||
MEDUSA_ADMIN_PATH=/
|
||
```
|
||
|
||
|
||
Where the value of `MEDUSA_BACKEND_URL` is the URL to your deployed Medusa application.
|
||
|
||
Then, click the Deploy button to deploy the admin. This takes a couple of minutes. Once the deployment is done, click the Continue to Dashboard button.
|
||
|
||
---
|
||
|
||
## 4. Set Admin URL
|
||
|
||
Vercel generates a random domain name for your project. You can use it or [set a custom domain name](https://vercel.com/guides/how-do-i-add-a-custom-domain-to-my-vercel-project).
|
||
|
||
Once you have the admin’s domain name, you must set the `ADMIN_CORS` environment variable in the Medusa application to the admin’s URL:
|
||
|
||
```bash
|
||
ADMIN_CORS=https://admin-...
|
||
```
|
||
|
||
And add the admin URL to the `AUTH_CORS` environment variable in the Medusa application:
|
||
|
||
```bash
|
||
AUTH_CORS=<OTHER_URLS>,https://admin-...
|
||
```
|
||
|
||
Where `<OTHER_URLS>` are URLs added previously to `AUTH_CORS`, such as the URL of a storefront. URLs in `AUTH_CORS` are separated by a comma.
|
||
|
||
Then, redeploy the Medusa application.
|
||
|
||
---
|
||
|
||
## Test the Admin
|
||
|
||
To test the admin, open its URL and login with an admin user’s credentials.
|
||
|
||
<Note>
|
||
|
||
If you don’t have an admin user on your Medusa application, use the [user command of the Medusa CLI tool](../../../medusa-cli/page.mdx#user).
|
||
|
||
</Note>
|
||
|
||
---
|
||
|
||
## Troubleshooting
|
||
|
||
If you’re running into issues in your admin, find the logs in your Vercel project’s dashboard under the Logs tab.
|