Deploy Vitepress to Vercel #

Assumptions #

• You have a Vitepress project
• You have a Vercel account
• You have the Vercel CLI installed
• You've copied the boilerplate Vitepress project (docs/vitepress-app) to docs/m2-docs directory
• You've named the copied Vitepress project m2-docs in the docs/m2-docs/package.json file

Preparing the Repo and Vitepress Project #

To deploy to Vercel we'll need to prepare the repository and the Vitepress project so that it can be deployed to Vercel.

Deploying to Vercel #

1. Create a new Vercel project

   

2. Select the github repository that contains the Vitepress project, and click Import

   

3. Enter desired project name

4. In Framework Preset select Other

5. In "Root Directory" click on Edit and select the root of your project

6. In Build and Output Settings

   6.1 Change build command to yarn build --filter=m2-docs...

    > Note the `...` at the end of the command - this tells Turborepo to build all packages that `m2-docs` depends on!
   

   6.2. Change output directory to docs/m2-docs/dist

   

7. Click Deploy

8. Wait for the deployment to FAIL

   Note that at this point the deployment will fail. This is expected. We'll need to make a few changes to the VitePress project before it can be deployed to Vercel.

9. Navigate back to the Vercel dashboard and click on the project that you just created

10. Click on Settings tab

11. Scroll down to Node.js Version and select 16.x in the dropdown, and click Save

    

12. Navigate to Deployment tab

    You should see a single failed deployment in the Deployments section.

13. Click on the three vertical dots to the right of the failed deployment , and click Redeploy

    

14. In the Redeploy dialog, click Redeploy

    

15. After a few moments the deployment should succeed

    

    Open up Assigning Domains section to see the URL of the deployed Vitepress project.

    Navigating to the URL should show the VitePress project.

    

Troubleshooting #

Vercel Deployment Fails #

If the first time you deploy the VitePress project to Vercel it fails, and you haven't updated to Node.js 16.x, then you'll need to update to Node.js 16.x and redeploy.