Skip to main content

Deployment on Vercel

Step 1: Create account​

Highly recommended to connect Git

Step 2: Install Vercel in project​

npm install vercel

Step 3: Configure Vercel​

In package.json, in the scripts property, add a new script:

{
  "scripts": {
    // ...
    "deploy": "vercel --prod"
  },
}

Step 4: Deploy for the first time​

  • In terminal run: npm run deploy
  • Connect to your Vercel account: if this is your first time, you need to verify your credential
  • Once verified, answer yes to this question:
? Set up and deploy “<folder_path>”? yes
  • You can have multiple scopes associated with your account. If you've just created your account, there should be only one. Choose it by pressing Enter to this question:
? Which scope should contain your project? yourname's projects
  • If you have already deployed this project to Vercel elsewhere, enter yes. Otherwise, type no:
? Link to existing project? no
  • Type your project name here. Make sure it only contains lower case alphanumeric letters and dashes.
? What’s your project’s name? name_here
  • If your code at the root of the project folder, you can keep ./ and press Enter:
? In which directory is your code located? ./
  • Normally, Vercel can detect these settings correctly. Type no to this prompt:
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings:
- Build Command: docusaurus build
- Development Command: docusaurus start --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: build
? Want to modify these settings? no
  • If the deployment is successfully, you should see something like this: vercel deployment message

Potential troubleshooting​

  • Even the deployment fails, a project will still be created in your Vercel portal. Vercel portal
  • Click on the project and scroll down to find the deployment logs. They will provide more details about the issue.

Deploy Vite project on Vercel​

  • Vercel may sometimes fail to detect the build folder correctly for Vite projects.
  • To fix this, go to the project portal in your Vercel account > Settings > Build & Development Settings > Output Directory, and set it to: dist

Cant reset deployment settings​

  • If you accidentally deploy or connect your project to an existing project on Vercel, even if you cancel the deployment before it finishes, Vercel saves the settings in your local folder.
  • To reset these settings, run:
npm unintall vercel
npm install vercel