Introducing Edgio Applications v7Find out what's new.
Edgio
Edgio

Migrating from Cloudflare Workers to Edge Functions

This guide offers a high-level overview and illustrative examples for migrating from Cloudflare Workers to Edgio Edge Functions. It is designed to help developers familiar with Cloudflare Workers understand the transition to Edge Functions by offering sample code for a general understanding of the migration process.

Function Signature

  • Cloudflare Worker: export default { async fetch(request) { ... } }
  • Edgio: export async function handleHttpRequest(request, context) { ... }
To convert from a Cloudflare Worker to an Edgio Edge function, you need to make the following changes:
  • Rename the function from fetch to handleHttpRequest and export it.
  • Include both request and context as arguments to the function.
  • Adjust any references to specific Cloudflare Worker properties or methods to their equivalent Edgio counterparts. See Edge Function parameters.
  • Return a Response or Promise<Response> instance.

Origin Configuration

In order to fetch content from an origin, you need to specify the origin in edgio.config.js and include it in the fetch() call in the edge function. See origin requests using fetch() for configuration requirements.

Examples

Basic HTML Response

The following example shows how to return a basic HTML response with the appropriate Content-Type header.

Cloudflare Worker Snippet

Original Cloudflare Worker code for returning HTML
JavaScript
1export default {
2 async fetch(request) {
3 const html = `<!DOCTYPE html>
4 <body>
5 <h1>Hello World</h1>
6 <p>This markup was generated by a Cloudflare Worker.</p>
7 </body>`;
8
9 return new Response(html, {
10 headers: {
11 'content-type': 'text/html;charset=UTF-8',
12 },
13 });
14 },
15};

Edge Function Equivalent

JavaScript
1export async function handleHttpRequest(request, context) {
2 const html = `<!DOCTYPE html>
3 <body>
4 <h1>Hello World</h1>
5 <p>This markup was generated by an Edgio Edge Function.</p>
6 </body>`;
7
8 return new Response(html, {
9 headers: {
10 'Content-Type': 'text/html;charset=UTF-8',
11 },
12 });
13}

Fetching JSON

The following example shows how to fetch JSON from an origin and return it as a response.

Cloudflare Worker Snippet

Original Cloudflare Worker code for fetching JSON
JavaScript
1export default {
2 async fetch(request, env, ctx) {
3 /**
4 * Example someHost is set up to take in a JSON request
5 * Replace url with the host you wish to send requests to
6 * @param {string} someHost the host to send the request to
7 * @param {string} url the URL to send the request to
8 */
9 const someHost = 'https://examples.cloudflareworkers.com/demos';
10 const url = someHost + '/static/json';
11
12 /**
13 * gatherResponse awaits and returns a response body as a string.
14 * Use await gatherResponse(..) in an async function to get the response body
15 * @param {Response} response
16 */
17 async function gatherResponse(response) {
18 const {headers} = response;
19 const contentType = headers.get('content-type') || '';
20 if (contentType.includes('application/json')) {
21 return JSON.stringify(await response.json());
22 }
23 return response.text();
24 }
25
26 const init = {
27 headers: {
28 'content-type': 'application/json;charset=UTF-8',
29 },
30 };
31
32 const response = await fetch(url, init);
33 const results = await gatherResponse(response);
34 return new Response(results, init);
35 },
36};

Edge Function Equivalent

JavaScript
1export async function handleHttpRequest(request, context) {
2 const url = 'https://www.your-server.com/static/json';
3
4 // Function to process the response
5 async function gatherResponse(response) {
6 const {headers} = response;
7 const contentType = headers.get('content-type') || '';
8 if (contentType.includes('application/json')) {
9 return JSON.stringify(await response.json());
10 }
11 return response.text();
12 }
13 const headers = {
14 'content-type': 'application/json;charset=UTF-8',
15 };
16 const response = await fetch(url, {
17 headers,
18 edgio: {
19 origin: 'web', // Specify the origin defined in edgio.config.js
20 },
21 });
22
23 const results = await gatherResponse(response);
24
25 return new Response(results, {
26 headers,
27 });
28}

Modify an Origin Response

The following example shows how to modify an origin response before returning it to the client, including changing the status code, adding a header, and modifying the response body.

Cloudflare Worker Snippet

Original Cloudflare Worker code for modifying a response
JavaScript
1export default {
2 async fetch(request) {
3 /**
4 * @param {string} headerNameSrc Header to get the new value from
5 * @param {string} headerNameDst Header to set based off of value in src
6 */
7 const headerNameSrc = 'foo'; //"Orig-Header"
8 const headerNameDst = 'Last-Modified';
9
10 /**
11 * Response properties are immutable. To change them, construct a new
12 * Response and pass modified status or statusText in the ResponseInit
13 * object. Response headers can be modified through the headers `set` method.
14 */
15 const originalResponse = await fetch(request);
16
17 // Change status and statusText, but preserve body and headers
18 let response = new Response(originalResponse.body, {
19 status: 500,
20 statusText: 'some message',
21 headers: originalResponse.headers,
22 });
23
24 // Change response body by adding the foo prop
25 const originalBody = await originalResponse.json();
26 const body = JSON.stringify({foo: 'bar', ...originalBody});
27 response = new Response(body, response);
28
29 // Add a header using set method
30 response.headers.set('foo', 'bar');
31
32 // Set destination header to the value of the source header
33 const src = response.headers.get(headerNameSrc);
34
35 if (src != null) {
36 response.headers.set(headerNameDst, src);
37 console.log(
38 `Response header "${headerNameDst}" was set to "${response.headers.get(
39 headerNameDst
40 )}"`
41 );
42 }
43 return response;
44 },
45};

Edge Function Equivalent

JavaScript
1export async function handleHttpRequest(request, context) {
2 const headerNameSrc = 'foo';
3 const headerNameDst = 'Last-Modified';
4
5 // Fetch the original response
6 const originalResponse = await fetch(request, {
7 edgio: {
8 origin: 'web', // Specify the origin defined in edgio.config.js
9 },
10 });
11
12 // Change status and statusText, but preserve body and headers
13 let response = new Response(originalResponse.body, {
14 status: 500,
15 statusText: 'some message',
16 headers: originalResponse.headers,
17 });
18
19 // Change response body by adding the foo property
20 const originalBody = await originalResponse.json();
21 const body = JSON.stringify({foo: 'bar', ...originalBody});
22 response = new Response(body, {
23 headers: response.headers,
24 status: response.status,
25 statusText: response.statusText,
26 });
27
28 // Add a header using set method
29 response.headers.set('foo', 'bar');
30
31 // Set destination header to the value of the source header
32 const src = response.headers.get(headerNameSrc);
33
34 if (src !== null) {
35 response.headers.set(headerNameDst, src);
36 }
37
38 return response;
39}