• Product
  • Solutions
  • Developers
  • Demo
  • Promotion
  • Company
EdgeOne Logo
Back to Templates

EdgeOne Pages Hono Application

EdgeOne Pages Hono Application - Modern Web Application Framework

View Demo
FrameworkHono
Use CasePages Functions
EdgeOne Pages Hono Application - Modern Web Application Framework

EdgeOne Pages Hono Application

This is a modern Web application built on the Hono framework, deployed on the EdgeOne Pages platform.

Live demo: https://hono.edgeone.app

๐Ÿš€ Project Features

  • Modular Route Design - Clear route organization structure
  • Server-Side Rendering - Page rendering using JSX and HTML templates
  • File Upload - File upload functionality support
  • Book Management - Example CRUD operations
  • Error Handling - Beautiful 404 and 500 error pages
  • TypeScript Support - Complete type definitions

๐Ÿ“ Project Structure

functions/
โ”œโ”€โ”€ index.tsx              # Main entry file
โ”œโ”€โ”€ [[default]].ts         # EdgeOne Functions default route
โ”œโ”€โ”€ env.ts                 # Environment type definitions
โ”œโ”€โ”€ components/            # Components directory
โ”‚   โ””โ”€โ”€ Layout.tsx         # Page layout component
โ””โ”€โ”€ routers/              # Route modules
    โ”œโ”€โ”€ index.ts          # Unified route exports
    โ”œโ”€โ”€ book.tsx          # Book related routes
    โ”œโ”€โ”€ ssr.tsx           # Server-side rendering routes
    โ””โ”€โ”€ upload.ts         # File upload routes

๐Ÿ›ฃ๏ธ Route Details

Static Routes

PathMethodDescription
/GETStatic home page, serves index.html from public directory

Examples:

  • https://hono.edgeone.app/ - Static home page

SSR Routes (/ssr)

PathMethodDescription
/ssr/:nameGETDynamic SSR page, displays personalized welcome message

Examples:

  • https://hono.edgeone.app/ssr/john - Shows "Hello john!" page

Book Management Routes (/book)

PathMethodDescription
/bookGETGet all books list page
/book/:idGETGet specific book details page
/bookPOSTCreate new book (API endpoint)

Examples:

  • https://hono.edgeone.app/book - Book list
  • https://hono.edgeone.app/book/1 - Details of the first book

Create Book API Request Example:

curl -X POST https://hono.edgeone.app/book \
  -H "Content-Type: application/json" \
  -d '{
    "title": "New Book Title",
    "author": "Author Name"
  }'

Supported Features:

  • CORS cross-origin support

File Upload Routes (/upload)

PathMethodDescription
/uploadPOSTFile upload endpoint

Example:

curl -X POST https://hono.edgeone.app/upload \
  -F "file=@example.txt"

๐Ÿ“– Detailed API Documentation

Basic Information

  • Base URL: https://hono.edgeone.app
  • Content-Type: application/json
  • Encoding: UTF-8

API Details

1. File Upload

Endpoint: POST /upload

Description: Upload files to server

Request Format: multipart/form-data

Request Parameters:

  • file (required): File to upload

curl Request Examples:

# Upload text file
curl -X POST https://hono.edgeone.app/upload \
  -F "file=@/path/to/your/file.txt"

# Upload image file
curl -X POST https://hono.edgeone.app/upload \
  -F "file=@/path/to/image.jpg"

# Upload with custom filename
curl -X POST https://hono.edgeone.app/upload \
  -F "file=@document.pdf;filename=my-document.pdf"

Response Example:

{
  "success": true,
  "message": "File uploaded successfully",
  "fileName": "file.txt"
}

Error Response:

{
  "success": false,
  "message": "No file provided"
}

2. Create Book

Endpoint: POST /book

Description: Create new book record

Request Parameters:

{
  "title": "Book Title",
  "author": "Author Name"
}

Parameter Description:

  • title (optional): Book title, defaults to "Untitled"
  • author (optional): Author name, defaults to "Unknown"

curl Request Examples:

# Create book with complete information
curl -X POST https://hono.edgeone.app/book \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Dream of the Red Chamber",
    "author": "Cao Xueqin"
  }'

# Create book with only title
curl -X POST https://hono.edgeone.app/book \
  -H "Content-Type: application/json" \
  -d '{
    "title": "New Book Title"
  }'

# Create empty book (using defaults)
curl -X POST https://hono.edgeone.app/book \
  -H "Content-Type: application/json" \
  -d '{}'

Response Example:

{
  "success": true,
  "message": "Book created successfully",
  "book": {
    "id": "abc123def",
    "title": "Book Title",
    "author": "Author Name",
    "createdAt": "2023-12-01T10:00:00.000Z"
  }
}

3. Get Book Information

curl Request Examples:

# Get all books list
curl -X GET https://hono.edgeone.app/book

# Get specific book details
curl -X GET https://hono.edgeone.app/book/1

# Get personal page
curl -X GET https://hono.edgeone.app/john

Error Code Description

Error CodeHTTP Status CodeDescription
VALIDATION_ERROR400Request parameter validation failed
FILE_UPLOAD_ERROR400File upload failed
NOT_FOUND404Resource not found
INTERNAL_ERROR500Internal server error

Rate Limiting

  • All API endpoints currently have no rate limiting
  • Client-side request frequency control is recommended

CORS Support

All API endpoints support cross-origin access, response headers include:

  • Access-Control-Allow-Origin: *
  • Access-Control-Allow-Methods: POST, GET, OPTIONS
  • Access-Control-Allow-Headers: Content-Type, Authorization

๐Ÿ”ง Development

Local Development

# Install dependencies
npm install

# Start development server
npm run dev

Deployment

# Deploy to EdgeOne
npm run deploy

๐ŸŒ Environment Variables

The project uses the following environment variables and global objects:

  • my_kv - KV storage instance for data persistence

๐Ÿ›ก๏ธ Security Features

IP Restriction (Optional)

The project includes IP restriction middleware configuration (commented by default), which can limit access sources:

app.use('*', ipRestriction(/* configuration */));

๐Ÿ“ API Response Format

Success Response

{
  "success": true,
  "message": "Operation successful",
  "data": {}
}

Error Response

{
  "error": "ERROR_CODE",
  "message": "Error description"
}

๐ŸŽจ UI Design

The project adopts modern UI design:

  • Responsive layout
  • System font stack
  • Card-style design
  • Unified color theme
  • Elegant error pages

๐Ÿ“ฆ Dependencies

  • hono - Web framework
  • @edgeone/ef-types - EdgeOne Functions type definitions
  • edgeone - EdgeOne CLI tool

๐Ÿค Contributing

Welcome to submit Issues and Pull Requests to improve this project.

๐Ÿ“„ License

MIT License