Deploying on Vercel

We're assuming you've already setup a vite app. If you didn't then follow the following steps otherwise skip the section.

Initialize a Vite App

npm create vite@latest
# Or
yarn create vite

Follow the prompts to create your project. Navigate to the project directory:

cd your-vite-project

Install Dependencies

Ensure all dependencies are installed:

npm install
# Or
yarn install

Build the Vite App

Before deploying, build the Vite app for production:

npm run build
# Or
yarn build

This will generate a dist/ folder, which contains the production build.

Install Vercel CLI

If you haven’t installed the Vercel CLI, install it globally:

npm install -g vercel

Deploy Using Vercel CLI

To deploy your Vite app:

Login to Vercel

• Run vercel login to authenticate with your Vercel account.

vercel login

Deploy the Project

Run vercel in your project directory

vercel

This command will guide you through the deployment setup. You will be asked to:

• Link or create a new project.

• Select the project scope (organization or personal).

• Confirm the default settings.

The default settings should work for most Vite apps, but make sure the build command is set to:

npm run build

And the output directory is:

dist

Re-deploy or Update: If you make updates to your project later, run:

vercel --prod

This will deploy your updated Vite app to the production environment.

(Optional) Configure a vercel.json File

You can also create a vercel.json file to define custom settings for your deployment. In the root of your project, add:

{
  "builds": [
    {
      "src": "vite.config.js",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/" }
  ]
}

This ensures that the correct build and routing settings are applied automatically.

View the Live URL

Once deployment is successful, Vercel will provide a live URL where your Vite app is hosted. You can visit the link to see your app in action.

That's it! Your Vite app is now live on Vercel.