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
export default {
  async fetch(request) {
    const html = `<!DOCTYPE html>
  		<body>
  		  <h1>Hello World</h1>
  		  <p>This markup was generated by a Cloudflare Worker.</p>
  		</body>`;

    return new Response(html, {
      headers: {
        'content-type': 'text/html;charset=UTF-8',
      },
    });
  },
};

Edge Function Equivalent

JavaScript
export async function handleHttpRequest(request, context) {
  const html = `<!DOCTYPE html>
    <body>
        <h1>Hello World</h1>
        <p>This markup was generated by an Edgio Edge Function.</p>
    </body>`;

  return new Response(html, {
    headers: {
      'Content-Type': 'text/html;charset=UTF-8',
    },
  });
}

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
export default {
  async fetch(request, env, ctx) {
    /**
     * Example someHost is set up to take in a JSON request
     * Replace url with the host you wish to send requests to
     * @param {string} someHost the host to send the request to
     * @param {string} url the URL to send the request to
     */
    const someHost = 'https://examples.cloudflareworkers.com/demos';
    const url = someHost + '/static/json';

    /**
     * gatherResponse awaits and returns a response body as a string.
     * Use await gatherResponse(..) in an async function to get the response body
     * @param {Response} response
     */
    async function gatherResponse(response) {
      const {headers} = response;
      const contentType = headers.get('content-type') || '';
      if (contentType.includes('application/json')) {
        return JSON.stringify(await response.json());
      }
      return response.text();
    }

    const init = {
      headers: {
        'content-type': 'application/json;charset=UTF-8',
      },
    };

    const response = await fetch(url, init);
    const results = await gatherResponse(response);
    return new Response(results, init);
  },
};

Edge Function Equivalent

JavaScript
export async function handleHttpRequest(request, context) {
  const url = 'https://www.your-server.com/static/json';

  // Function to process the response
  async function gatherResponse(response) {
    const {headers} = response;
    const contentType = headers.get('content-type') || '';
    if (contentType.includes('application/json')) {
      return JSON.stringify(await response.json());
    }
    return response.text();
  }
  const headers = {
    'content-type': 'application/json;charset=UTF-8',
  };
  const response = await fetch(url, {
    headers,
    edgio: {
      origin: 'web', // Specify the origin defined in edgio.config.js
    },
  });

  const results = await gatherResponse(response);

  return new Response(results, {
    headers,
  });
}

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
export default {
  async fetch(request) {
    /**
     * @param {string} headerNameSrc Header to get the new value from
     * @param {string} headerNameDst Header to set based off of value in src
     */
    const headerNameSrc = 'foo'; //"Orig-Header"
    const headerNameDst = 'Last-Modified';

    /**
     * Response properties are immutable. To change them, construct a new
     * Response and pass modified status or statusText in the ResponseInit
     * object. Response headers can be modified through the headers `set` method.
     */
    const originalResponse = await fetch(request);

    // Change status and statusText, but preserve body and headers
    let response = new Response(originalResponse.body, {
      status: 500,
      statusText: 'some message',
      headers: originalResponse.headers,
    });

    // Change response body by adding the foo prop
    const originalBody = await originalResponse.json();
    const body = JSON.stringify({foo: 'bar', ...originalBody});
    response = new Response(body, response);

    // Add a header using set method
    response.headers.set('foo', 'bar');

    // Set destination header to the value of the source header
    const src = response.headers.get(headerNameSrc);

    if (src != null) {
      response.headers.set(headerNameDst, src);
      console.log(
        `Response header "${headerNameDst}" was set to "${response.headers.get(
          headerNameDst
        )}"`
      );
    }
    return response;
  },
};

Edge Function Equivalent

JavaScript
export async function handleHttpRequest(request, context) {
  const headerNameSrc = 'foo';
  const headerNameDst = 'Last-Modified';

  // Fetch the original response
  const originalResponse = await fetch(request, {
    edgio: {
      origin: 'web', // Specify the origin defined in edgio.config.js
    },
  });

  // Change status and statusText, but preserve body and headers
  let response = new Response(originalResponse.body, {
    status: 500,
    statusText: 'some message',
    headers: originalResponse.headers,
  });

  // Change response body by adding the foo property
  const originalBody = await originalResponse.json();
  const body = JSON.stringify({foo: 'bar', ...originalBody});
  response = new Response(body, {
    headers: response.headers,
    status: response.status,
    statusText: response.statusText,
  });

  // Add a header using set method
  response.headers.set('foo', 'bar');

  // Set destination header to the value of the source header
  const src = response.headers.get(headerNameSrc);

  if (src !== null) {
    response.headers.set(headerNameDst, src);
  }

  return response;
}