Visitors can then be redirected to different pages, depending on the bucket and cookie they were assigned.
You could even use A/B testing in combination with Geolocation at The Edge!
-import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// look for existing "test_bucket" cookie
diff --git a/pages/context-site/README.md b/pages/context-site/README.md
index cf7b89a..fa3546d 100644
--- a/pages/context-site/README.md
+++ b/pages/context-site/README.md
@@ -9,7 +9,7 @@ Netlify Edge Functions give access to site information via `context.site`.
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
return new Response(`Hello from ${context.site.name}!`);
diff --git a/pages/context-site/index.js b/pages/context-site/index.js
index e68d3be..e297982 100644
--- a/pages/context-site/index.js
+++ b/pages/context-site/index.js
@@ -8,7 +8,7 @@ export default {
Access Site Information from Edge Functions
Netlify Edge Functions give access to site information via context.site.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
return new Response(\`Hello from \${context.site.name}!\`);
diff --git a/pages/cookies-delete/README.md b/pages/cookies-delete/README.md
index 04a72a0..cabb018 100644
--- a/pages/cookies-delete/README.md
+++ b/pages/cookies-delete/README.md
@@ -9,7 +9,7 @@ Manipulate HTTP cookies
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Set a cookie
diff --git a/pages/cookies-delete/index.js b/pages/cookies-delete/index.js
index 4e75bcb..af83ef5 100644
--- a/pages/cookies-delete/index.js
+++ b/pages/cookies-delete/index.js
@@ -8,7 +8,7 @@ export default {
Delete HTTP cookies
Use an Edge Function to delete cookies.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Delete a cookie
diff --git a/pages/cookies-read/README.md b/pages/cookies-read/README.md
index 2f8ef06..cd2cdc3 100644
--- a/pages/cookies-read/README.md
+++ b/pages/cookies-read/README.md
@@ -9,7 +9,7 @@ Manipulate HTTP cookies
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Set a cookie
diff --git a/pages/cookies-read/index.js b/pages/cookies-read/index.js
index d566930..0bcacee 100644
--- a/pages/cookies-read/index.js
+++ b/pages/cookies-read/index.js
@@ -8,7 +8,7 @@ export default {
Reading cookies
Use an Edge Function to read and manage HTTP cookies.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Read the value of a cookie
diff --git a/pages/cookies-set/README.md b/pages/cookies-set/README.md
index 506e18a..128e438 100644
--- a/pages/cookies-set/README.md
+++ b/pages/cookies-set/README.md
@@ -9,7 +9,7 @@ Manipulate HTTP cookies
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Set a cookie
diff --git a/pages/cookies-set/index.js b/pages/cookies-set/index.js
index 8a69ddd..6ea18cc 100644
--- a/pages/cookies-set/index.js
+++ b/pages/cookies-set/index.js
@@ -8,7 +8,7 @@ export default {
Setting cookies
Use an Edge Function to create and manage HTTP cookies.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Set a cookie
diff --git a/pages/country-block/index.js b/pages/country-block/index.js
index 7ac904a..56840eb 100644
--- a/pages/country-block/index.js
+++ b/pages/country-block/index.js
@@ -10,7 +10,7 @@ export default {
You can use geolocation data to identify a user's country and block content if required.
Geolocation information is available on the Context.geo object.
- import { Context } from "https://edge.netlify.com/";
+ import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const BLOCKED_COUNTRY_CODE = "GB";
diff --git a/pages/environment/README.md b/pages/environment/README.md
index ca75d43..a9d42cf 100644
--- a/pages/environment/README.md
+++ b/pages/environment/README.md
@@ -10,7 +10,7 @@ use the `Netlify.env` API.
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const value = Netlify.env.get("MY_IMPORTANT_VARIABLE");
diff --git a/pages/environment/index.js b/pages/environment/index.js
index 6cc0655..483594d 100644
--- a/pages/environment/index.js
+++ b/pages/environment/index.js
@@ -9,7 +9,7 @@ export default {
Use environment variables
To access your Netlify environment variables in Edge Functions, use the Netlify.env API.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const value = Netlify.env.get("MY_IMPORTANT_VARIABLE");
diff --git a/pages/geolocation/index.js b/pages/geolocation/index.js
index 58d5603..2768c46 100644
--- a/pages/geolocation/index.js
+++ b/pages/geolocation/index.js
@@ -22,7 +22,7 @@ export default {
Geolocation information is available on the Context.geo object.
- import { Context } from "https://edge.netlify.com/";
+ import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Here's what's available on context.geo
diff --git a/pages/home/index.js b/pages/home/index.js
index 76a5165..0d4cd10 100644
--- a/pages/home/index.js
+++ b/pages/home/index.js
@@ -1,8 +1,9 @@
export default {
title: "Home",
- metaDescription: "Explore our library of Edge Function examples and deploy your own to Netlify.",
+ metaDescription:
+ "Explore our library of Edge Function examples and deploy your own to Netlify.",
page: function () {
- return /* html */`
+ return /* html */ `
Examples
@@ -26,19 +27,21 @@ export default {
Proxy requests to another source
-
+
- HTTP Headers
+ HTTP Headers and Methods
-
+
Transforming responses
diff --git a/pages/htmlrewriter/README.md b/pages/htmlrewriter/README.md
new file mode 100644
index 0000000..d5672e9
--- /dev/null
+++ b/pages/htmlrewriter/README.md
@@ -0,0 +1,66 @@
+
+
+# Transform HTML responses with Netlify Edge Functions and HTMLRewriter
+
+You can use Edge Functions with the HTMLRewriter library to transform HTML
+responses. HTMLRewriter uses WebAssembly to parse a response stream, so is very
+efficient. It can parse large HTML pages with minimal overhead, and is a better
+choice than using a string transform in most cases. It has an API that uses
+familiar CSS selectors to target elements, and can be used to add, remove, or
+modify elements.
+
+In this example, we transform an HTML page, replacing the `src` of `![]()
` tags
+with a placeholder image. We also add content with the user's location. This
+shows how to do user personalization when the pages may be static.
+
+## Code example
+
+Edge Functions are files held in the `netlify/edge-functions` directory.
+
+```ts
+import { Config, Context } from "@netlify/edge-functions";
+import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter/index.ts";
+
+export default async function handler(request: Request, context: Context) {
+ const url = new URL(request.url);
+ // Only run if the `catify` query parameter is set
+ if (!url.searchParams.has("catify")) {
+ return;
+ }
+
+ const location = context?.geo?.city;
+
+ const response = await context.next();
+ const rewriter = new HTMLRewriter()
+ .on("#location", {
+ element: (element) => {
+ element.setInnerContent(`Catified for a visitor in ${location}`);
+ },
+ })
+ .on("img[catify]", {
+ element: (element) => {
+ const width = element.getAttribute("width") ?? 800;
+ const height = element.getAttribute("height") ?? 600;
+ element.setAttribute(
+ "src",
+ `https://placekitten.com/${width}/${height}`
+ );
+ element.setAttribute("alt", "A random cat");
+ },
+ });
+ return rewriter.transform(response);
+}
+```
+
+- [Explore the code for this Edge Function](../../netlify/edge-functions/htmlrewriter.ts)
+
+## View this example on the web
+
+- https://edge-functions-examples.netlify.app/example/htmlrewriter/
+
+## Deploy to Netlify
+
+You can deploy this and all the other examples in this repo as a site of your
+own to explore and experiment with, by clicking this button.
+
+[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/edge-functions-examples&utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify)
diff --git a/pages/htmlrewriter/index.js b/pages/htmlrewriter/index.js
new file mode 100644
index 0000000..5295fcf
--- /dev/null
+++ b/pages/htmlrewriter/index.js
@@ -0,0 +1,67 @@
+import repoLink from "../../components/repo-link.js";
+
+export default {
+ title: "Transform HTML Response stream",
+ metaDescription: "Dynamically transform any HTML response at the edge.",
+ page: function () {
+ return /* html */ `
+
+ Transform HTML responses with Netlify Edge Functions and HTMLRewriter
+
+ You can use Edge Functions with the HTMLRewriter library to transform HTML
+ responses. HTMLRewriter uses WebAssembly to parse a response stream, so is very
+ efficient. It can parse large HTML pages with minimal overhead, and is a better
+ choice than using a string transform in most cases. It has an API that uses
+ familiar CSS selectors to target elements, and can be used to add, remove, or
+ modify elements.
+
+
+ In this example, we transform an HTML page, replacing the src of ![]()
+
+ import { Config, Context } from "@netlify/edge-functions";
+import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter/index.ts";
+
+export default async function handler(request: Request, context: Context) {
+ const url = new URL(request.url);
+ // Only run if the catify query parameter is set
+ if (!url.searchParams.has("catify")) {
+ return;
+ }
+
+ const location = context?.geo?.city;
+
+ const response = await context.next();
+ const rewriter = new HTMLRewriter()
+ .on("#location", {
+ element: (element) => {
+ element.setInnerContent(\`Catified for a visitor in \${location}\`);
+ },
+ })
+ .on("img[catify]", {
+ element: (element) => {
+ const width = element.getAttribute("width") ?? 800;
+ const height = element.getAttribute("height") ?? 600;
+ element.setAttribute(
+ "src",
+ \`https://placekitten.com/\${width}/\${height}\`
+ );
+ element.setAttribute("alt", "A random cat");
+ },
+ });
+ return rewriter.transform(response);
+}
+
+
+ See this in action
+
+ - View the original response from /a-static-page without a transform
+ - View the response from /a-static-page dynamically transformed with a HTMLRewriter
+ - ${repoLink("htmlrewriter.ts")}
+
+
+ `;
+ },
+};
diff --git a/pages/image/index.js b/pages/image/index.js
index 9cc5321..a9c45f3 100644
--- a/pages/image/index.js
+++ b/pages/image/index.js
@@ -9,7 +9,7 @@ export default {
Image Response
You can use Edge Functions to return an image.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
diff --git a/pages/include/README.md b/pages/include/README.md
index 712c0e5..b26bd62 100644
--- a/pages/include/README.md
+++ b/pages/include/README.md
@@ -13,7 +13,7 @@ some other content.
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import { Context } from "https://edge.netlify.com/";
+import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
// Get the page content
diff --git a/pages/include/index.js b/pages/include/index.js
index 651638d..da6d628 100644
--- a/pages/include/index.js
+++ b/pages/include/index.js
@@ -14,7 +14,7 @@ export default {
In this example, we look for an {{INCLUDE_PRICE_INFO}} placeholder in our response, and replace it with some other content.
- import { Context } from "https://edge.netlify.com/";
+ import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
diff --git a/pages/json/README.md b/pages/json/README.md
index e33eaa4..16ec252 100644
--- a/pages/json/README.md
+++ b/pages/json/README.md
@@ -10,7 +10,7 @@ You can use Edge Functions to return a JSON response by returning `Response.json
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
return Response.json({ hello: "world" });
diff --git a/pages/json/index.js b/pages/json/index.js
index 35711bd..373e304 100644
--- a/pages/json/index.js
+++ b/pages/json/index.js
@@ -10,7 +10,7 @@ export default {
You can use Edge Functions to return a JSON response by returning Response.json() with a JavaScript object — no need to JSON.stringify!
In this example, we return a JSON object containing hello: "world".
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
return Response.json({ hello: "world" });
diff --git a/pages/log/README.md b/pages/log/README.md
index 892bcd6..e888cd9 100644
--- a/pages/log/README.md
+++ b/pages/log/README.md
@@ -9,7 +9,7 @@ Output content to the logs from an Edge Function using `console.log()`.
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
console.log("Hello from the logging service");
diff --git a/pages/log/index.js b/pages/log/index.js
index b9878c1..9195afd 100644
--- a/pages/log/index.js
+++ b/pages/log/index.js
@@ -8,7 +8,7 @@ export default {
Logging with Edge Functions
You can output content to the logs during the execution of your Edge Function.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
console.log("Hello from the logging service");
diff --git a/pages/long-running/README.md b/pages/long-running/README.md
index 5807f96..8855c75 100644
--- a/pages/long-running/README.md
+++ b/pages/long-running/README.md
@@ -9,7 +9,7 @@ Edge Functions are limited to 50ms of CPU time, but this does not include time s
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default (request: Request, context: Context) => {
const body = new ReadableStream({
diff --git a/pages/long-running/index.js b/pages/long-running/index.js
index 364ac7b..5632f14 100644
--- a/pages/long-running/index.js
+++ b/pages/long-running/index.js
@@ -13,7 +13,7 @@ export default {
from the function and write to it when you have the data.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default (request: Request, context: Context) => {
const body = new ReadableStream({
diff --git a/pages/method/README.md b/pages/method/README.md
new file mode 100644
index 0000000..9e673de
--- /dev/null
+++ b/pages/method/README.md
@@ -0,0 +1,48 @@
+
+
+# Configure for specific HTTP methods
+
+With in-source configuration, you can restrict Edge Functions to respond to certain HTTP methods.
+
+## Code example
+
+Edge Functions are files held in the `netlify/edge-functions` directory.
+
+```ts
+import type { Config, Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+
+ return new Response(`This is a response to a ${request.method} request`)
+};
+
+export const config: Config = {
+ method: ["POST", "PUT"]
+}
+```
+
+- [Explore the code for this Edge Function](../../netlify/edge-functions/method.ts)
+
+## View this example on the web
+
+- https://edge-functions-examples.netlify.app/example/method
+
+When viewed through a browser, the URL should 404. To validate that it works, you can use a CURL by running the following command in a terminal:
+
+```
+curl -X POST https://edge-functions-examples.netlify.app/example/method
+```
+
+or
+
+```
+curl -X PUT https://edge-functions-examples.netlify.app/example/method
+```
+
+
+## Deploy to Netlify
+
+You can deploy this and all the other examples in this repo as a site of your own to explore and experiment with, by
+clicking this button.
+
+[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/edge-functions-examples&utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify)
diff --git a/pages/method/index.js b/pages/method/index.js
new file mode 100644
index 0000000..544afd4
--- /dev/null
+++ b/pages/method/index.js
@@ -0,0 +1,39 @@
+import repoLink from "../../components/repo-link.js";
+
+export default {
+ title: "Configure for HTTP Methods",
+ metaDescription: "Configure Edge Functions to execute for certain HTTP methods.",
+ page: function() {
+ return `
+
+ Configure for specific HTTP methods
+
+ With in-source configuration, you can restrict Edge Functions to respond to certain HTTP methods.
+
+
+ In this example, we set up an Edge Function to execute for a PUT or POST request.
+
+
+ import type { Config, Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ return new Response(\`This is a response to a \${request.method}\`)
+};
+
+export const config: Config = {
+ method: ["POST", "PUT"]
+}
+ See this in action
+ Since the Edge Function is configured to respond to PUT and POST, accessing the Edge Function through a browser will result in a 404.
+
To validate that the Edge Function works, you can use cURL in your terminal:
+
+
curl -X POST https://edge-functions-examples.netlify.app/example/method
+
curl -X PUT https://edge-functions-examples.netlify.app/example/method
+
+
+ - ${repoLink("method.ts")}
+
+
+ `;
+ },
+};
diff --git a/pages/proxy-requests/README.md b/pages/proxy-requests/README.md
index 59cd0fc..5cc4851 100644
--- a/pages/proxy-requests/README.md
+++ b/pages/proxy-requests/README.md
@@ -10,7 +10,7 @@ Edge Function.
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import { Context } from "https://edge.netlify.com/";
+import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const joke = await fetch("https://github.com/service/https://icanhazdadjoke.com/", {
diff --git a/pages/proxy-requests/index.js b/pages/proxy-requests/index.js
index bd7ffff..95334e8 100644
--- a/pages/proxy-requests/index.js
+++ b/pages/proxy-requests/index.js
@@ -8,7 +8,7 @@ export default {
Proxy requests to another source
You can use fetch() to make requests to other sources via an Edge Function.
- import { Context } from "https://edge.netlify.com/";
+ import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
diff --git a/pages/rewrite/README.md b/pages/rewrite/README.md
index 94406de..7c31cbc 100644
--- a/pages/rewrite/README.md
+++ b/pages/rewrite/README.md
@@ -9,7 +9,7 @@ You can rewrite requests on one URL to resources available on another URL using
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
return new URL("/something-to-serve-with-a-rewrite", request.url);
diff --git a/pages/rewrite/index.js b/pages/rewrite/index.js
index 2c7e227..f9fc7b7 100644
--- a/pages/rewrite/index.js
+++ b/pages/rewrite/index.js
@@ -8,7 +8,7 @@ export default {
Rewrite with Edge Functions
You can rewrite requests on one URL to resources available on another URL using an Edge Function.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
return new URL("/something-to-serve-with-a-rewrite", request.url);
diff --git a/pages/server-sent-events/README.md b/pages/server-sent-events/README.md
index 654e14d..2d9260b 100644
--- a/pages/server-sent-events/README.md
+++ b/pages/server-sent-events/README.md
@@ -9,7 +9,7 @@ You can use Edge Functions to create a long-running service that can stream data
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
let index = 0
diff --git a/pages/server-sent-events/index.js b/pages/server-sent-events/index.js
index 0cffbaf..4a3bdb2 100644
--- a/pages/server-sent-events/index.js
+++ b/pages/server-sent-events/index.js
@@ -12,7 +12,7 @@ export default {
This means you can create a long-running service that can stream data to the browser.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
let index = 0
diff --git a/pages/set-request-header/README.md b/pages/set-request-header/README.md
index 6089798..148ace1 100644
--- a/pages/set-request-header/README.md
+++ b/pages/set-request-header/README.md
@@ -9,7 +9,7 @@ Use an Edge Function to add HTTP headers to any HTTP request at The Edge.
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const response = await context.next();
diff --git a/pages/set-request-header/index.js b/pages/set-request-header/index.js
index 3d4d37e..84fead2 100644
--- a/pages/set-request-header/index.js
+++ b/pages/set-request-header/index.js
@@ -8,7 +8,7 @@ export default {
Set custom HTTP request headers with an Edge Function
Use an Edge Function to add HTTP headers to any HTTP request.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
request.headers.set("X-Your-Custom-Header", "Your custom header value");
diff --git a/pages/set-response-header/README.md b/pages/set-response-header/README.md
index c8f9b8c..383c13c 100644
--- a/pages/set-response-header/README.md
+++ b/pages/set-response-header/README.md
@@ -9,7 +9,7 @@ Use an Edge Function to add HTTP headers to any HTTP response at The Edge.
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import type { Context } from "https://edge.netlify.com/";
+import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const response = await context.next();
diff --git a/pages/set-response-header/index.js b/pages/set-response-header/index.js
index 7d5b367..e689e06 100644
--- a/pages/set-response-header/index.js
+++ b/pages/set-response-header/index.js
@@ -8,7 +8,7 @@ export default {
Set custom HTTP response headers with an Edge Function
Use an Edge Function to add HTTP headers to any HTTP response.
- import type { Context } from "https://edge.netlify.com/";
+ import type { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const response = await context.next();
diff --git a/pages/transform/README.md b/pages/transform/README.md
index 1a77f4a..de9405e 100644
--- a/pages/transform/README.md
+++ b/pages/transform/README.md
@@ -11,7 +11,7 @@ request to `/hello` with JavaScript's toUpperCase() function, using
Edge Functions are files held in the `netlify/edge-functions` directory.
```ts
-import { Context } from "https://edge.netlify.com/";
+import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const url = new URL(request.url);
diff --git a/pages/transform/index.js b/pages/transform/index.js
index 0e6eaf7..f1ff79f 100644
--- a/pages/transform/index.js
+++ b/pages/transform/index.js
@@ -10,8 +10,10 @@ export default {
You can use Edge Functions to transform the content of an HTTP response. In this example, we transform the response of a request to /hello with a toUpperCase() function, using the query parameter method=transform.
+ This is a simple example, and for more complex transformations you may want to use HTMLRewriter.
+
- import { Context } from "https://edge.netlify.com/";
+ import { Context } from "@netlify/edge-functions";
export default async (request: Request, context: Context) => {
const url = new URL(request.url);
@@ -27,11 +29,8 @@ export default async (request: Request, context: Context) => {
};
- This transform Edge Function is set up to run using the method=transform query parameter on any URL, using this entry in the netlify.toml file:
+ This transform Edge Function is set up to run using the method=transform query parameter on any URL
- [[edge_functions]]
- function = "transform"
- path = "/*"
See this in action
- View the original response from /hello without a transform
diff --git a/public/a-static-page.html b/public/a-static-page.html
new file mode 100644
index 0000000..3806c9d
--- /dev/null
+++ b/public/a-static-page.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+ Catify
+
+
+
+
+ A static page
+
+ Catify me
+
+ 
+ 
+
+
+
\ No newline at end of file