---
title: Vercel Edge Adapter and Middleware | Deployments
contributors:
  - adamdbradley
  - manucorporat
  - hamatoyogi
  - reemardelarosa
  - mhevery
  - gioboa
  - mrhoodz
updated_at: '2023-08-23T18:52:18Z'
created_at: '2023-04-06T21:28:28Z'
---

import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';

# Vercel Edge Adapter

Qwik City Vercel Edge adapter allows you to connect Qwik City to [Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions).

## Installation

To integrate the `vercel-edge` adapter, use the `add` command:


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run qwik add vercel-edge
```
</span>
<span q:slot="npm">
```shell
npm run qwik add vercel-edge
```
</span>
<span q:slot="yarn">
```shell
yarn run qwik add vercel-edge
```
</span>
<span q:slot="bun">
```shell
bun run qwik add vercel-edge
```
</span>
</PackageManagerTabs>

> It will automatically install the required dependencies, including the [Vercel CLI](https://vercel.com/docs/cli).

The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:

```shell
└── adapters/
    └── vercel-edge/
        └── vite.config.ts
└── src/
    └── entry.vercel-edge.tsx
```

Additionally, within the `package.json`, the `build.server` and `deploy` scripts will be updated.

## Production build

To build the application for production, use the `build` command, this command will automatically run `build.server` and `build.client`:

<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run build
```
</span>
<span q:slot="npm">
```shell
npm run build
```
</span>
<span q:slot="yarn">
```shell
yarn run build
```
</span>
<span q:slot="bun">
```shell
bun run build
```
</span>
</PackageManagerTabs>

[Read the full guide here](https://github.com/QwikDev/qwik/blob/main/starters/adapters/vercel-edge/README.md)

## Dev deploy

To deploy the application for development:

<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run deploy
```
</span>
<span q:slot="npm">
```shell
npm run deploy
```
</span>
<span q:slot="yarn">
```shell
yarn run deploy
```
</span>
<span q:slot="bun">
```shell
bun run deploy
```
</span>
</PackageManagerTabs>

Notice that you might need a [Vercel account](https://vercel.com/docs/concepts/get-started) in order to complete this step!

## Production deploy

After installing the integration the project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it.

Please refer to the Vercel docs for more information on how to deploy your site: [Vercel docs](https://vercel.com/docs/concepts/deployments/overview)

### Environment variables

You can access environment variables from Vercel like this `process.env['MY_ENV_VAR']`

## Advanced

### Vercel Edge Entry Middleware

When the `vercel-edge` adapter is added, a new entry file will be created at `src/entry.vercel-edge.tsx`. Below is an example of using the built-in middleware within the entry file.

```tsx title="src/entry.vercel-edge.tsx"
import { createQwikCity } from '@builder.io/qwik-city/middleware/vercel-edge';
import qwikCityPlan from '@qwik-city-plan';
import render from './entry.ssr';

export default createQwikCity({ render, qwikCityPlan });
```

The compiled middleware will be built in the `.vercel/output` directory.

### Vercel Edge Functions

[Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) are deployed globally by default on Vercel's Edge Network and enable you to move server-side logic to the Edge, close to your visitor's origin.

Edge Functions use the Vercel Edge Runtime, which is built on the same high-performance V8 JavaScript and WebAssembly engine that is used by the Chrome browser. By taking advantage of this small runtime, Edge Functions can have faster cold boots and higher scalability than Serverless Functions.

Edge Functions run after the cache, and can both cache and return responses.

### Drizzle with Vercel Edge Functions

Running Postgres on edge requires edge-compatible drivers since Postgres relies on Node.js APIs. 
When no adapter is used, the below errors might appear during the deployment process:
```tsx 
└── The Edge Function "_qwik-city" is referencing unsupported modules
└── Cannot bundle Node.js built-in "node:events" imported from "node_modules\postgres\cf\polyfills.js"
```
Luckily, drizzle has a [section](https://orm.drizzle.team/learn/tutorials/drizzle-with-vercel-edge-functions#edge-compatible-driver) that can be followed to implement the right adapter of choice.


