| Index | Name | Source Code | Description |
|---|---|---|---|
| 01 | Non-Streaming Page Rewriting | View | Implement page adaptation based on 'Edge Cloud Apps'. For example, when accessed using the Chrome browser, the page is rewritten, while other browsers display the original content.Page rewriting has broad applications, such as sensitive word auditing, external link rewriting for acceleration, and full-site IPv6 access support. |
| 02 | Page Internationalization - Browser Option Version | View | This example demonstrates how to use Edge Cloud Apps to dynamically translate a website based on a user's browser language, enabling localization for Chinese, German, and Japanese audiences even if the origin site only offers English content.To achieve this, the origin site can first add a custom attribute, data-i18n-key, to any HTML tag that requires translation. Then to deploy Function with HTMLRewriter to intercept the HTML response and performs stream-based translation and modification, dynamically translating the tagged elements as the content streams through.This streaming translation approach, where content is simultaneously received, modified, and delivered, reduces latency for faster page loads and minimizes memory pressure on edge servers. |
| 03 | Page Internationalization - IP Geolocation Version | View | The 'Browser Option Version' determines the display language of the webpage based on the user's browser language settings. In contrast, the 'IP Geolocation Version' selects the appropriate language by identifying the country or region of the visitor's IP address: visitors from China see a Chinese page, visitors from Germany see a German page, visitors from Japan see a Japanese page, and visitors from other countries see an English page. |
| 04 | KV CRUD Operations | View | Perform CRUD operations on data in a fixed space of 'Edge KV' through 'Edge Cloud Apps'. |
| 05 | Short Link Application | View | A short link application implemented based on 'Edge KV' + 'Edge Cloud Apps'. |
| 06 | WebSocket Click Counter | View | This example showcases an 'Edge Cloud Apps' Functions that returns an HTML page containing client-side WebSocket code. The code interacts with a WebSocket server, also hosted on an Edge Cloud Apps Function.Traditional CDNs offer limited acceleration for WebSocket traffic. By moving the WebSocket logic to the edge, we significantly reduce latency for a more responsive experience and alleviate pressure on the origin server. |
| 07 | Edge Static Website | View | This example showcases a serverless, distributed website hosted entirely on the edge, using Edge KV for storage and 'Edge Cloud Apps' Functions for routing and business logic.This approach offers several advantages:1. Eliminates traditional origin server costs and complexities.2. Provides inherently low latency due to global edge deployments, eliminating the need for a CDN and cache invalidation issues.3. Enables rapid website updates and deployments. |
| 08 | HTMLRewriter Web Scraping | View | Use HTMLRewriter in 'Edge Cloud Apps' to scrape and display 'New & Upcoming In Theaters' movies from the homepage of 'Rotten Tomatoes'. |
| 09 | M3U8 Video Playback | View | Convert large video files into M3U8 playlist files and TS slice files, store them in 'Edge KV', and access and play them through 'Edge Cloud Apps'. |
| 10 | Image Hosting Application | View | Store the uploaded images in 'Edge KV' and provide a corresponding access URL. |
| 11 | Todo List | View | A todo list implemented based on 'Edge KV' + 'Edge Cloud Apps'. |
| 12 | Repo Hunt | View | This example project demonstrates how to build a full-stack serverless application using 'Edge Cloud Apps' and 'Edge KV'. Visitors to the page can share GitHub or GitLab open-source project repositories for others to browse, and only those shared on the same day are displayed on the homepage. |
| 13 | Edge Rendering | View | This exmaple showcases how 'Edge Cloud Apps' Functions can perform edge rendering, using network peering analysis as a practical example. By taking a user-provided ASN and a pre-configured target ASN (e.g., Apple's), the Edge Function queries the PeeringDB API, calculates shared facilities and exchange points, and uses an HTMLRewriter to dynamically insert this information into a pre-existing HTML template. The result is a customized, pre-rendered response delivered directly to the user, highlighting the performance and SEO benefits of edge rendering. |
| 14 | WASM Resizer | View | Call pre-compiled WASM libraries to resize images.'Edge Cloud Apps' only support JavaScript, but you can compile languages like C, C++, Rust, Go into WASM to run in 'Edge Cloud Apps', allowing you to reuse existing code assets or achieve higher execution efficiency. |
| 15 | Request Signing and Verification | View | This demo highlights how to use 'Edge Cloud Apps' Functions to secure access to specific website resources using cryptographic signatures. Access to the target URL, a pet shop's "about" page, requires a valid signature generated with HMAC and SHA-256 algorithms. The Functions can either sign outgoing requests on behalf of the client or verify incoming signed requests, acting as a security gatekeeper. Unauthorized requests receive an error page. 'Edge Cloud Apps' Functions full support for the Web Crypto API allows for robust cryptographic operations at the edge, demonstrating how to enhance web application security with this powerful technology. |
| 16 | Single Node Edge Waiting Room | View | This demo implements a Virtual Waiting Room using 'Edge Cloud Apps' Functions to control access to the "team" page of a pet shop website. The waiting room allows a maximum of one concurrent visitor with a queue size of two, granting successful visitors 15 seconds of direct access. To simplify single-machine testing, "Client IP + User Agent" is used as a unique client identifier, and modifying your computer's hosts file is recommended to ensure all requests hit the same edge node. |
| 17 | Universal Edge Waiting Room | View | The single-node version uses independent queues with fixed quotas on each edge node. In contrast, the universal version dynamically adjusts quotas across all edge nodes based on real-time traffic, providing centralized queue management. For testing purposes, the global waiting room is configured to allow three concurrent visitors and a queue size of three, with a quota bundle size of one. Using "Client IP + User Agent" as a unique client identifier, the demo facilitates testing multiple clients from a single machine, showcasing the flexibility of Edge Cloud Apps in building both single-node and global waiting room solutions. |
| 18 | Site Proxy | View | Reverse proxy for the entire Gutenberg Project website. To access it properly, certain rewrites are needed (including request URL, headers, response headers, and response body). This example demonstrates the combination of streaming and non-streaming rewrites. |
| 19 | Insert JS into HTML | View | Use HTMLRewriter to streamingly rewrite HTML files, inserting specific JS files or JS code into the Head and Body to add animation effects to the page. |
| 20 | Function Variables Example | View | This example showcases 'Edge Cloud Apps' Functions Variables, which allow non-technical users to dynamically view/configure Function behavior without modifying code. Similar to how settings are adjusted for traditional CDN features, operational personnel can use the CDNetworks console to modify pre-defined variables and directly control parameters within the Function, enabling real-time adjustments and empowering operational flexibility. |
| 21 | Client IP Information Display | View | Display detailed information about the user's access IP, for developing various location-based applications. |
| 22 | Weather Query Application | View | Display weather information based on the user's geographic location. |
| 23 | MONA Image Processing Examples | View | Image processing supports flexible image editing, such as image rotation, cropping, transcoding, scaling, and image or text watermarking for copyright protection solutions, meeting the needs of various business scenarios. |
| 24 | Image Audit Examples | View | Image pornographic content audit, using deep learning models to determine if an image is pornographic. Supported image formats include BMPDIB, JPEG, JPG, JPE, PNG, jp2, and more. |
| 25 | A/B Testing | View | A/B testing with same-URL direct access.Customers access the same URL and receive different versions based on cookies, achieving the purpose of A/B testing. A new user visiting for the first time (without cookies) will be randomly assigned to either the test group or the control group and will remain in that group for subsequent visits (via cookies). |
| 26 | HTTP Basic Authentication | View | The origin site originally has no authentication mechanism. Add HTTP Basic Authentication through "Edge Cloud Apps" so that only users who enter the correct username and password (admin/123456) can access it. To log out and re-authenticate after logging in, users can click "Logout" in the navigation bar. |