Lesson 2. Deploying a React Vite App to Vercel from Vercel CLI

Setup and Deploy

Vercel provides an easy way to deploy front-end applications like those built with Vite. Here's how to do it:

1. Prepare Your Vite React App

• Ensure it builds correctly: In your project's root directory, run:

  npm run build
  npm run preview

  • This will create an optimized production build of your app in a dist folder.

2. Set Up a Vercel Account (if you don't have one)

• Go to Vercel and sign up using your Git provider (GitHub, GitLab, or Bitbucket) or email.

3. Install Vercel CLI (Optional but Recommended)

• Vercel CLI (https://vercel.com/docs/cli) allows you to deploy from your terminal. Install it using npm (Note: Use PowerShell terminal on Windows):

  //on Windows
  npm install -g vercel
  //on Linux
  sudo npm install -g vercel

• Verify the version of Vercel CLI currently being used (in PowerShell terminal on Windows)

vercel --version

1. create GitHub repository

Respoitory Name: Book Search App

Repository URL :

1. At your app project directory in VSC terminal, this initialized empty Git repository in /Users/user/yourproject/.git/.

git init

// ..or create a new repository on the command line (on Gitbash terminal)
echo "# words" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/icecloud-dcp/words.git
git push -u origin main

// …or push an existing repository from the command line
git remote add origin https://github.com/icecloud-dcp/words.git
git branch -M main
git push -u origin main

6. Deploy via Vercel CLI[Optional]

• Log in to Vercel: In your terminal, run:

  vercel login

  • This will open a browser window to authenticate with your Vercel account.

• Initialize Vercel(if not initialized): In your project's root directory, run:

  vercel init vite

  • This command will walk you through a few steps.

  • Success! Initialized "vite" example in E:\Your-folder\Courses\Projects\react-app\bible-flashcard-app\vite.

    • To deploy, cd vite and run vercel.

cd vite

• Deploy: From your App project's root directory(NOT vite directory), simply run:

  vercel deploy

  • Vercel will detect that it's a Vite project and deploy it correctly.

  • You'll see the deployment progress in your terminal.

// processes
?  Set up and deploy “E:\Your-folder\Courses\Projects\react-appp\bible-flashcard-app\vite”? yes
?  Which scope should contain your project? Joshua's projects
?  Link to existing project? yes
? What’s the name of your existing project? words100
🔗  Linked to joshuas-projects-dc94ec84/words100 (created .vercel and added it to .gitignore)
🔍  Inspect: https://vercel.com/joshuas-projects-dc94ec84/words100/HUtfhzqC48WPGYkYJLB3XefifWuU [934ms]
✅  Preview: https://words100-4zuanzmka-joshuas-projects-dc94ec84.vercel.app [935ms]
📝  To deploy to production (words100.vercel.app), run `vercel --prod`

• Once deployed, Vercel will provide you with a URL where your app is live.