Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
    • Domain Management
    • Pages Functions
    • KV Storage
    • Edge AI
    • EdgeOne CLI
    • Pages MCP
    • Best Practices
      • 1-Minute Quick Deployment + Free Beta Test in Progress | Your Exclusive DeepSeek, Handled by EdgeOne!
      • Deploy WordPress Gatsby To EdgeOne Pages
      • Build an Ecommerce Platform Using WordPress + GatsbyJS
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • FAQs
    • Contact Us
    • Release Notes
Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey
Get Started Now !
Docs Overview/
Edge Developer Platform/
Pages/
Pages Functions/

Pages Functions

Overview

EdgeOne edge nodes provide a Serverless code execution environment for Pages edge functions. You just need to write business function code and set trigger rules. Without the need to configure and manage servers or other infrastructure, you can run code elastically and securely on edge nodes close to users.






Advantages of Edge Functions

Distributed Deployment
EdgeOne has more than 3,200 edge nodes. Edge functions run on edge nodes in a distributed deployment.

Ultra-low latency
Client requests will be automatically scheduled to the latest edge node close to your users. Hit the trigger rule to trigger the edge function to process the request and return the response result to the client, which can significantly reduce the access latency of the client.

Elastic Scale-out
Edge functions can handle client requests by routing them to the nearest edge nodes with sufficient computational resources in response to a sudden increase in the number of client requests, from closest to farthest. You no need to worry about spikes occur.

Serverless Architecture
You no need to care about and maintain the memory, CPU, network and other infrastructure resources of the underlying server, and can devote more energy to the development of business code.


Quick Start Guide

1. Install npm packages: npm install -g edgeone. For more commands, see the scaffolding document.
2. Develop locally: under the Pages code project
2.1 Function Initialization: edgeone pages init, automatically initialize the functions directory, and host the functions code.
2.2 Associate project: edgeone pages link, fill in the current project name, and automatically associate project KV configuration, environment variables, etc.
2.3 Local development: edgeone pages dev, start up local proxy service, perform function debugging.
3. Function release: Push code to the remote repository and automatically build and release the function.



Route

Pages Functions generates access routes based on the /functions directory structure. You can create subdirectories of any level in the /functions directory of the project repository. See the following example.
...
functions
├── index.js
├── hello-pages.js
├── helloworld.js
├── api
    ├── users
      ├── list.js
      ├── geo.js
      ├── [id].js
    ├── visit
      ├── index.js
    ├── [[default]].js
...
The above directory file structure will generate the following routes after being constructed by the EdgeOne Pages platform. These routes map the Pages URL to the /functions file. When the client accesses the URL, the corresponding file code will be triggered to run:
File path
Route
/functions/index.js
example.com/
/functions/hello-pages.js
example.com/hello-pages
/functions/helloworld.js
example.com/helloworld
/functions/api/users/list.js
example.com/api/users/list
/functions/api/users/geo.js
example.com/api/users/geo
/functions/api/users/[id].js
example.com/api/users/1024
/functions/api/visit/index.js
example.com/api/visit
/functions/api/[[default]].js
example.com/api/books/list
example.com/api/books/1024
example.com/api/...
Note:
A trailing slash / in the route is optional. /hello-pages and /hello-pages/ will be routed to /functions/hello-pages.js.
If no Pages Functions route is matched, client requests will be routed to the corresponding static resources of Pages.
Routing is case-sensitive. /helloworld will be routed to /functions/helloworld.js and cannot be routed to /functions/HelloWorld.js.

Dynamic routing
Pages Functions support dynamic routing. In the above example, the single - level dynamic path is /functions/api/users/[id].js, and the multi - level dynamic path is /functions/api/[[default]].js. See the following usage:
File path
Route
Match
/functions/api/users/[id].js
example.com/api/users/1024
Yes
example.com/api/users/vip/1024
No
example.com/api/vip/1024
No
/functions/api/[[default]].js
example.com/api/books/list
Yes
example.com/api/1024
Yes
example.com/v2/vip/1024
No


Function Handlers

Use Functions Handlers to create custom request handlers for Pages, as well as define RESTful APIs to implement full-stack applications. The following Handlers methods are supported:
Handlers method
Description
onRequest(context: EventContext): Response | Promise<Response>
Match HTTP Methods
(GET, POST, PATCH, PUT, DELETE, HEAD, OPTIONS)
onRequestGet(context: EventContext): Response | Promise<Response>
Match HTTP Methods (GET)
onRequestPost(context: EventContext): Response | Promise<Response>
Match HTTP Methods (POST)
onRequestPatch(context: EventContext): Response | Promise<Response>
Match HTTP Methods (PATCH)
onRequestPut(context: EventContext): Response | Promise<Response>
Match HTTP Methods (PUT)
onRequestDelete(context: EventContext): Response | Promise<Response>
Match HTTP Methods (DELETE)
onRequestHead(context: EventContext): Response | Promise<Response>
Match HTTP Methods (HEAD)
onRequestOptions(context: EventContext): Response | Promise<Response>
Match HTTP Methods (OPTIONS)

<EventContext object description>
The context is an object passed to the Function Handlers method, containing the following properties:
request: client request object
params: dynamic routing /functions/api/users/[id].js parameter value
export function onRequestGet(context) {
  return new Response(`User id is ${context.params.id}`);
}
env: Pages environment variables


Runtime APIs

Pages Functions is implemented based on edge Functions and provides a Serverless code execution environment for EdgeOne edge nodes. It supports ES6 syntax and standard Web Service Worker APIs. Most of the Runtime APIs can refer to the edge function usage. See the following description:
API
Description
Cache is designed based on the Web APIs standard Cache API. The Functions runtime will inject the caches object globally. This object provides a set of cache operation interfaces.
Cookies provide a set of cookie operation APIs.
Designed based on the Web APIs standard TextEncoder and TextDecoder, an encoder and a decoder are implemented.
Designed based on the Web APIs standard Fetch API. The Edge Function runtime can use fetch to initiate an async request and obtain remote resources.
Headers are designed based on the Web APIs standard Headers. They are applicable to HTTP request and response header operations.
Request represents the HTTP request object and is designed based on the Web APIs standard Request.
Response represents the HTTP response, designed based on the Web APIs standard Response.
ReadableStream is a readable stream, also known as a readable end, designed based on the Web APIs standard ReadableStream.
Web Crypto API is designed based on the Web APIs standard Web Crypto API. It provides a set of common encryption operation APIs. Compared with encryption APIs implemented in pure JavaScript, Web Crypto API has higher performance.
Edge function is a Serverless code execution environment designed and implemented based on the V8 JavaScript engine, providing the following standardized Web APIs.
Note:
- Currently, using fetch to access EdgeOne node cache or origin-pull is not supported in the Edgeone CLI debugging environment.
- Use context.request.eo to obtain client GEO info.
Pages Functions does not support addEventListener. Listen to client requests based on Function Handlers.


Sample Function


Retrieve user access geolocation:
export function onRequest({request}) {
  const geo = request.eo.geo;
  const res = JSON.stringify({
    geo: geo,
  });

  return new Response(res, {
    headers: {
      'content-type': 'application/json; charset=UTF-8',
      'Access-Control-Allow-Origin': '*',
    },
  });
}


Use KV to record page views:
For detailed information about how to use KV storage, please see KV storage.
export async function onRequest({ request, params, env }) {
  // my_kv is the variable name when you bind a namespace in the project.
  const visitCount = await my_kv.get('visitCount');
  let visitCountInt = Number(visitCount);
  visitCountInt += 1;
  await my_kv.put('visitCount', visitCountInt.toString());

  const res = JSON.stringify({
    visitCount: visitCountInt,
  });

  return new Response(res, {
    headers: {
      'content-type': 'application/json; charset=UTF-8',
      'Access-Control-Allow-Origin': '*',
    },
  });
}




Connect to supabase third-party database:
import { createClient } from '@supabase/supabase-js';

export async function onRequest({ request, params, env }) {
  const supabase = createClient(env.supabaseUrl, env.supabaseKey);

  let { data } = await supabase.from('users').select('*');

  return new Response(JSON.stringify({
    users: data,
  }), {
    headers: {
      'content-type': 'application/json; charset=UTF-8',
      'Access-Control-Allow-Origin': '*',
    },
  });
}