Qwik City - Netlify Edge Middleware

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

Get started

Create src/entry.netlify.ts using the built-in middleware within a user's app.

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",
+      }),
    ],
  };
});

Configure netlify.toml

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

Usage

Along with client build, run vite command to performing SSR build

vite build --ssr src/entry.netlify.ts

Now you can use Netlify CLI to preview or deploy. Read full guide here

• Netlify Edge Middleware Source