Netlify Edge Middleware

Qwik City Netlify Edge middleware allows you to connect Qwik City to Netlify Edge.

Add to Qwik project

Run this command to integrate netlify-edge with your app:

npm run qwik add netlify-edge

The previous command will create src/entry.netlify-edge.tsx using the built-in middleware within a user's app.

Manually Add Netlify Edge

If want to add Netilify Edge manually, you can add or modify files like below:

src/entry.netlify-edge.tsx

import { qwikCity } from '@builder.io/qwik-city/middleware/netlify-edge';
import render from './entry.ssr';

const qwikCityHandler = qwikCity(render);

export default qwikCityHandler;

vite.config.ts

import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";
+import netlifyEdge from "@netlify/vite-plugin-netlify-edge";

export default defineConfig(() => {
  return {
    plugins: [
      qwikCity(),
      qwikVite({
+        ssr: {
+          outDir: "netlify/edge-functions",
+        },
      }),
      tsconfigPaths(),
+      netlifyEdge({
+        functionName: "entry.netlify-edge",
+      }),
    ],
  };
});

Configure netlify.toml

[[edge_functions]]
path = "/*"
function = "entry.netlify-edge"

Usage

Use Netlify CLI to preview or deploy. Read the full guide here

vite build --ssr src/entry.netlify-edge.tsx
netlify dev

Context

Netlify context is available in endpoint method's platform param:

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

Environment variables

export const onRequest = async ({ platform }) => {
  platform.log('Vite env read from .dev file', import.meta.env.VITE_DEV)
  platform.log('netlify serverless env read from Netlify UI or CLI', Deno.env.toObject())
  return {}
};