Python Cloud Functions on EdgeOne Pages - Handler Mode

A function request demonstration website based on Next.js + Tailwind CSS, showcasing how to deploy Python Cloud Functions using Handler Mode on EdgeOne Pages with BaseHTTPRequestHandler.

🚀 Features

• Standard Python Handler: Uses Python's built-in BaseHTTPRequestHandler for request/response handling
• Modern UI Design: Adopts black background with white text theme, using #1c66e5 as accent color
• Real-time API Demo: Integrated Python backend with interactive API call testing for all route types
• No Framework Dependency: Pure Python function without Flask, FastAPI, or other frameworks
• TypeScript Support: Complete type definitions and type safety

🛠️ Tech Stack

Frontend

• Next.js 15 - React full-stack framework
• React 19 - User interface library
• TypeScript - Type-safe JavaScript
• Tailwind CSS 4 - Utility-first CSS framework

UI Components

• Lucide React - Beautiful icon library
• class-variance-authority - Component style variant management
• clsx & tailwind-merge - CSS class name merging utilities

Backend

• Python 3.9+ - Cloud Functions runtime
• Handler Mode - BaseHTTPRequestHandler-based Python functions on EdgeOne Pages

📁 Project Structure

python-handler-template/
├── cloud-functions/                # Python Cloud Functions source
│   └── api/
│       └── [[default]].py         # Main function entry (catch-all handler)
├── src/
│   ├── app/                       # Next.js App Router
│   │   ├── globals.css           # Global styles
│   │   ├── layout.tsx            # Root layout
│   │   └── page.tsx              # Main page (API demo UI)
│   ├── components/               # React components
│   │   └── ui/                   # UI base components
│   │       ├── button.tsx        # Button component
│   │       └── card.tsx          # Card component
│   └── lib/                      # Utility functions
│       └── utils.ts              # Common utilities
├── public/                        # Static assets
├── package.json                   # Project configuration
└── README.md                     # Project documentation

🚀 Quick Start

Requirements

• Node.js 18+
• npm or yarn
• Python 3.9+ (for local development)

Install Dependencies

npm install
# or
yarn install

Development Mode

edgeone pages dev

Visit http://localhost:8088 to view the application.

Build Production Version

edgeone pages build

🎯 Core Features

1. API Endpoints

The cloud-functions/api/[[default]].py catch-all handler provides:

Method	Path	Description
GET	/api/	Root endpoint, returns greeting
GET	/api/health	Health check
GET	/api/info	Function information
GET	/api/time	Current server time
GET	/api/echo	Echo request info
POST	/api/echo	Echo POST request
POST	/api/json	Handle JSON body
GET	/api/users/:id	Get user by ID
POST	/api/users	Create new user
GET	/api/search?q=...	Search with query parameters

2. Interactive API Demo

• Click "Call" to test each API endpoint in real-time
• View JSON response with syntax highlighting
• Supports both GET and POST requests

3. Handler Convention

The Python handler file uses the standard BaseHTTPRequestHandler class:

import json
import time
from http.server import BaseHTTPRequestHandler

class handler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-Type', 'application/json')
        self.end_headers()
        self.wfile.write(json.dumps({
            "message": "Hello from Python Cloud Function!",
            "timestamp": time.time()
        }).encode('utf-8'))

🔧 Configuration

Tailwind CSS Configuration

The project uses Tailwind CSS 4 with custom color variables:

:root {
  --primary: #1c66e5;        /* Primary color */
  --background: #000000;     /* Background color */
  --foreground: #ffffff;     /* Foreground color */
}

Component Styling

Uses class-variance-authority to manage component style variants with multiple preset styles.

📚 Documentation

• EdgeOne Pages Official Docs: https://pages.edgeone.ai/document/python-functions
• Next.js Documentation: https://nextjs.org/docs
• Tailwind CSS Documentation: https://tailwindcss.com/docs
• Python Documentation: https://docs.python.org/3

🚀 Deployment Guide

EdgeOne Pages Deployment

1. Push code to GitHub repository
2. Create new project in EdgeOne Pages console
3. Select GitHub repository as source
4. Configure build command: edgeone pages build
5. Deploy project

Python Cloud Functions Configuration

Create cloud-functions/ folder in project root and add Python handler files:

# cloud-functions/api/[[default]].py
import json
import time
from http.server import BaseHTTPRequestHandler

class handler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-Type', 'application/json')
        self.end_headers()
        self.wfile.write(json.dumps({
            "message": "Hello from Python!",
            "timestamp": time.time()
        }).encode('utf-8'))

Deploy

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.