https://github.com/egoist/vite-vercel

Adding Vercel middleware support to your Vite project
https://github.com/egoist/vite-vercel

Last synced: 20 days ago
JSON representation

Adding Vercel middleware support to your Vite project

• Host: GitHub
• URL: https://github.com/egoist/vite-vercel
• Owner: egoist
• License: mit
• Created: 2022-05-03T05:15:59.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-23T02:33:05.000Z (about 1 year ago)
• Last Synced: 2024-05-02T01:16:36.704Z (about 2 months ago)
• Language: TypeScript
• Homepage: vite-vercel-example.vercel.app
• Size: 82 KB
• Stars: 95
• Watchers: 2
• Forks: 3
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - egoist/vite-vercel - Adding Vercel middleware support to your Vite project (TypeScript)

README

        
**💛 You can help the author become a full-time open-source maintainer by [sponsoring him on GitHub](https://github.com/sponsors/egoist).**

---

# vite-vercel

[![npm version](https://badgen.net/npm/v/vite-vercel)](https://npm.im/vite-vercel) [![npm downloads](https://badgen.net/npm/dm/vite-vercel)](https://npm.im/vite-vercel)

> Adding a middleware powered by [Vercel Edge Function](https://vercel.com/features/edge-functions) to your existing Vite project.

## Install

```bash

npm i vite-vercel -D

```

## Usage

In your `vite.config.ts`:

```ts

import { defineConfig } from "vite"

import vercel from "vite-vercel"

export default defineConfig({

  plugins: [

    vercel({

      middleware: "./middleware.ts",

    }),

  ],

})

```

Creating a `middleware.ts`:

```ts

import { MiddlewareRequest, MiddlewareResponse } from "vite-vercel/server"

export default (req: MiddlewareRequest) => {

  const url = new URL(req.url)

  if (url.pathname === "/from-middleware") {

    return new Response("from middleware")

  }

  // Rewrite to another URL

  if (url.pathname === "/todo") {

    return MiddlewareResponse.rewrite(

      "https://jsonplaceholder.typicode.com/todos/1",

    )

  }

  // Continue serving `index.html`

  return MiddlewareResponse.next()

}

```

## Deploy on Vercel

This plugin uses Vercel's [Build Output API (v3)](https://vercel.com/docs/build-output-api/v3) which requires an Environment Variable named `ENABLE_VC_BUILD` to be set to `1` in order to enable the feature.

## Credits

A lot of code are taken from Next.js since it's basically the same logic, all credits to Next.js authors.

## Sponsors

[![sponsors](https://sponsors-images.egoist.sh/sponsors.svg)](https://github.com/sponsors/egoist)

## License

MIT © [EGOIST](https://github.com/sponsors/egoist)