Node Functions on EdgeOne Pages - Express

A function request demonstration website based on Next.js + Tailwind CSS, showcasing how to deploy Express applications using Node Functions on EdgeOne Pages.

🚀 Features

• Modern UI Design: Adopts black background with white text theme, using #1c66e5 as accent color
• Responsive Layout: Supports desktop and mobile devices, providing optimal user experience
• Real-time API Demo: Integrated Express backend with real-time function call testing
• Component-based Architecture: Uses shadcn/ui style component system
• 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

• shadcn/ui - High-quality React components
• Lucide React - Beautiful icon library
• class-variance-authority - Component style variant management
• clsx & tailwind-merge - CSS class name merging utilities

Backend

• Express.js - Node.js web application framework
• Node Functions - EdgeOne Pages serverless functions

📁 Project Structure

express-template/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── globals.css     # Global styles
│   │   ├── layout.tsx      # Root layout
│   │   └── page.tsx        # Main page
│   ├── 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

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. Main Page Display

• Project title and description
• One-click deployment and view documentation buttons
• Express code example showcase

2. API Call Demo

• Real-time function call testing
• Loading state display
• Result display

3. Responsive Design

• Mobile-friendly layout
• Adaptive component sizing
• Touch-friendly interactions

🔧 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/node-functions
• Next.js Documentation: https://nextjs.org/docs
• Tailwind CSS Documentation: https://tailwindcss.com/docs
• Express.js Documentation: https://expressjs.com

🚀 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

Node Functions Configuration

Create node-functions/ folder in project root and add Express application:

// node-functions/express/[[default]].js
import express from "express";
const app = express();

app.get("/", (req, res) => {
  res.json({ message: "Hello from Express on Node Functions!" });
});

export default app;

Deploy

📄 License

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