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)
};
Additionally, you may import the RequestHandlerNetlify
type to have have type completions in your editor.
import {type RequestHandlerNetlify} from '@builder.io/qwik-city/middleware/netlify-edge';
export const onGet: RequestHandlerNetlify = (({platform}) => {
//...
})
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 {}
};