Deploying to Vercel with Vite JS

Welcome to our comprehensive guide on deploying your Vite JS projects to Vercel! By the end of this tutorial, you'll be able to deploy your own Vite projects with ease. Let's dive in!

🎯 Introduction

Vite JS is a modern front-end build tool that offers faster development, type-checking, and optimized production builds. Vercel is a platform that makes it easy to deploy, collaborate, and host your projects. This guide will show you how to deploy your Vite projects to Vercel.

💡 Prerequisites

Before we start, make sure you have the following:

Node.js installed (Installation Guide)
Vite installed globally (npm install -g vite)
A project created with Vite (vite create my-project)

📝 Setting up your project for Vercel

To prepare your project for Vercel deployment, follow these steps:

Install vercel CLI: npm install vercel -D
Create a vercel.json file in the project root:

json

{
  "version": 2,
  "builds": [{ "src": ".", "use": "@vercel/vite" }],
  "public": "dist"
}

💡 Pro Tip: The vercel.json file tells Vercel to use Vite for building your project.

📝 Building and deploying to Vercel

Now that your project is set up for Vercel, let's build and deploy it:

Build your project: vite build
Log in to Vercel (vercel login and follow the prompts)
Deploy your project: vercel

Your project is now live on Vercel! You can find the link in your terminal or in the Vercel dashboard.

📝 Vercel Links and Environment Variables

By default, Vercel generates a link for your project. You can also set environment variables to customize your deployment.

Create a vercel.json file with the following content:

json

{
  "version": 2,
  "builds": [{ "src": ".", "use": "@vercel/vite", "env": { "MY_VAR": "my-value" } }],
  "public": "dist"
}

💡 Pro Tip: Replace "my-value" with your desired value for MY_VAR.

💡 Real-world Example

Let's build and deploy a simple Vite project with a custom Vercel link and environment variable:

Create a new Vite project: vite create my-app
Navigate to your project: cd my-app
Install Vercel CLI: npm install vercel -D
Create a vercel.json file:

json

{
  "version": 2,
  "builds": [{ "src": ".", "use": "@vercel/vite", "env": { "API_KEY": "secret-key" } }],
  "public": "dist"
}

Create a simple index.html file:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Vite App</title>
  </head>
  <body>
    <h1>Welcome to my Vite app!</h1>
    <p>My API key is: <strong id="api-key"></strong></p>
    <script>
      document.querySelector('#api-key').innerHTML = process.env.API_KEY;
    </script>
  </body>
</html>

Build and deploy your project:
vite build vercel

Now, you should see a live deployment with your API key displayed on the page.

📝 Cleaning Up

Once you're done with this tutorial, you can remove the vercel CLI and vercel.json file from your project:

npm uninstall vercel
rm vercel.json

📝 Quiz

That's it for this tutorial! We hope you enjoyed learning about deploying Vite projects to Vercel. Happy coding! 🎉