---
title: Netlify Edge Adapter and Middleware | Deployments
contributors:
  - adamdbradley
  - manucorporat
  - reemardelarosa
  - mhevery
  - mrhoodz
updated_at: '2023-06-25T19:43:33Z'
created_at: '2023-04-06T21:28:28Z'
---

import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
import { Note } from '~/components/note/note';

# Netlify Edge Adapter

Qwik Router Netlify Edge adapter allows you to connect Qwik Router to [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/).

## Installation

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


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

<Note>It will automatically install the required dependencies, including the [Netlify CLI](https://cli.netlify.com/).</Note>

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/
    └── netlify-edge/
        └── vite.config.ts
└── src/
    └── entry.netlify-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/netlify-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 [Netlify account](https://docs.netlify.com/get-started/) in order to complete this step!

## Production deploy

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

Please refer to the Netlify docs for more information on how to deploy your site: [Netlify docs](https://docs.netlify.com/site-deploys/create-deploys/)

## Advanced

### Netlify Edge Entry Middleware

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

```tsx title="src/entry.netlify-edge.tsx"
import { createQwikRouter } from '@qwik.dev/router/middleware/netlify-edge';
import render from './entry.ssr';

export default createQwikRouter({ render });
```

The compiled middleware will be built in the `.netlify/edge-functions` directory.

### Netlify Edge Functions Declarations

[Netlify Edge Functions declarations](https://docs.netlify.com/edge-functions/declarations/) can be configured to run on specific URL patterns. Each edge function declaration associates one site path pattern with one function to execute on requests that match the path. A single request can execute a chain of edge functions from a series of declarations. A single edge function can be associated with multiple paths across various declarations.

This is useful to determine if a page response should be Server-Side Rendered (SSR) or if the response should use a static-site generated (SSG) `index.html` file instead.

By default, the Netlify Edge adapter will generate a `.netlify/edge-middleware/manifest.json` file, which is used by the Netlify deployment to determine which paths should, and should not, use edge functions.

To override the generated manifest, you can [add a declaration](https://docs.netlify.com/edge-functions/declarations/#add-a-declaration) to the `netlify.toml` using the `[[edge_functions]]` config. For example:

```toml title="netlify.toml"
[[edge_functions]]
  path = "/admin"
  function = "auth"
```

### Netlify Request Context

[Netlify context](https://docs.netlify.com/edge-functions/api/#netlify-specific-context-object) is available in endpoint method's `platform` param:

```ts
export const onRequest = async ({ platform }) => {
  platform.log('requested ip:', platform.ip);
};
```

### Environment variables

```ts
export const onRequest = async ({ env }) => {
  platform.log('netlify serverless env read from Netlify UI or CLI', env.get('API_KEY'));
};
```

- [Netlify Environment Variables](https://docs.netlify.com/environment-variables/overview/#environment-variable-options)
- [Netlify Edge Middleware Source](https://github.com/QwikDev/qwik/blob/main/packages/qwik-router/src/middleware/netlify-edge/index.ts)
