> For the complete documentation index, see [llms.txt](https://www.ankitavirani.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.ankitavirani.com/experience/deployment-platforms/vercel.md).

# Vercel

Deploying both frontend and backend to Vercel involves deploying the projects separately as they are usually distinct applications with different requirements.

### 1. Setting Up Vercel

* **Sign Up/Login to Vercel:**
  * Visit <https://vercel.com> and sign up using your GitHub, GitLab, or Bitbucket account.
* **Create a New Project:**
  * After logging in, click on the "Add New\..." button and select "Project" to start a new deployment.

### 2. Preparing Your Frontend and Backend Projects

Make sure your projects are set up correctly:

* **Frontend (e.g., React, Next.js) Project:**
  * Should have a `package.json` file with a build script (`"build": "next build"` for Next.js).
  * Make sure your frontend is ready for production (environment variables, API URLs, etc.).
* **Backend (e.g., Node.js/Express) Project:**
  * Should also have a `package.json` file with a start script (`"start": "node index.js"`).
  * Add a Vercel configuration (`vercel.json`) to specify the serverless functions.

### 3. Deploying the Frontend on Vercel

**Step-by-Step Deployment:**

1. **Connect to Git Repository:**
   * Connect your frontend repository to Vercel.
   * Select your Git provider (GitHub, GitLab, Bitbucket) and pick the repository for the frontend.
2. **Configure Project Settings:**
   * Set the **framework preset** to your frontend framework (e.g., Next.js).
   * Configure the **Environment Variables** if needed, such as API URLs.
3. **Deploy Frontend:**
   * Click "Deploy" and wait for Vercel to build and deploy the frontend.
   * Once deployed, Vercel will provide you with a URL (e.g., `your-project.vercel.app`).

### 4.  Deploy Backend on Vercel 🌐

Vercel treats backend projects as serverless functions.

**Step-by-Step Deployment:**

1. **Connect to Git Repository:**
   * Connect your backend repository to Vercel.
   * Select your Git provider and pick the repository for the backend.
2. **Add `vercel.json` Configuration:**
   * Create a `vercel.json` file in the root of your backend project to specify the serverless functions configuration:

     ```json
     {
       "version": 2,
       "builds": [
         { "src": "api/**/*.js", "use": "@vercel/node" }
       ],
       "routes": [
         { "src": "/api/(.*)", "dest": "/api/$1" }
       ]
     }
     ```
   * Place your backend code in the `/api` directory (e.g., `/api/index.js`). Vercel will treat these files as serverless functions.
3. **Configure Environment Variables:**
   * Set environment variables like database URLs, API keys, etc., in the **Environment Variables** section.
4. **Deploy Backend:**
   * Click "Deploy" and wait for Vercel to build and deploy the backend.
   * Once deployed, Vercel will provide a URL for your backend endpoints (e.g., `your-backend.vercel.app/api`).

### 5. Setting Up Environment Variables

* **Frontend Environment Variables:**
  * In Vercel, go to your frontend project settings.
  * Under "Environment Variables", add variables like `NEXT_PUBLIC_API_URL` to point to the backend deployment URL.
* **Backend Environment Variables:**
  * In Vercel, go to your backend project settings.
  * Add variables for database connection strings, secret keys, etc.

### 6. Setting Up a Custom Domain in Vercel🌍

You can set up a custom domain to make your frontend and backend accessible through your own domain name.

**Step-by-Step Process:**

1. **Add Domain to Vercel:**
   * In the Vercel dashboard, go to your frontend or backend project.
   * Click on "Settings" and then "Domains".
   * Click on "Add Domain" and enter your custom domain (e.g., `www.example.com`).
2. **Verify Domain Ownership:**

   * Vercel will provide you with DNS records that you need to add to your domain registrar.
   * Typically, you need to add an `A` record or `CNAME` record pointing to Vercel's servers.

   **For Main Website:**

   * Add an `A` record pointing to the IP address given by Vercel.

   **For Subdomain:**

   * Create a `CNAME` record pointing to your Vercel project URL (e.g., `your-project.vercel.app`).
3. **Wait for Propagation:**
   * DNS changes can take some time (up to 24-48 hours) to propagate, though it's usually much faster.
4. **Configure HTTPS:**
   * Vercel automatically provides an SSL certificate for your domain. You don’t need to configure SSL manually.
   * Once the domain is verified, Vercel will enable HTTPS by default.

### 7. Connecting Frontend to Backend

* Update the API URLs in your frontend code to point to the backend endpoint deployed on Vercel.
  * For example, set `NEXT_PUBLIC_API_URL=https://your-backend.vercel.app/api` in your environment variables.

#### Example Command Summary 📝

* **Install Vercel CLI (Optional but Recommended for Local Testing):**

  ```sh
  shCopy codenpm install -g vercel
  ```
* **Deploy Frontend Locally:**

  ```sh
  shCopy codevercel --prod
  ```
* **Deploy Backend Locally:**

  ```sh
  shCopy codecd backend
  vercel --prod
  ```

### 8. Summary 🚀

* **Frontend Deployment:**
  * Connect to Vercel -> Configure -> Deploy -> Get URL.
* **Backend Deployment:**
  * Connect to Vercel -> Add `vercel.json` -> Configure -> Deploy -> Get URL.
* **Domain Setup:**
  * Add domain -> Verify with DNS -> Wait for propagation -> HTTPS enabled by Vercel.

This setup ensures that your frontend and backend are deployed separately on Vercel but can work together seamlessly through the use of environment variables and domain configuration.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://www.ankitavirani.com/experience/deployment-platforms/vercel.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.