Overview

EdgeOne Pages is a front-end development and deployment platform built on Tencent EdgeOne infrastructure, designed for modern web development. It enables developers to quickly build and deploy static sites and serverless applications. By integrating edge function capabilities, it ensures efficient content delivery and dynamic functionality expansion, supporting fast access for users worldwide.

The rapid integration of item and Pages function capabilities can be achieved through the Edgeone CLI. Edgeone CLI provides methods to manage Pages functions. With the help of CLI, you can generate, configure and debug functions in the project.

1. Preparations

• Activate the Pages service in the Console, create a Pages project, and clone it to Local.

• Go to the CAM Page of the Console to Retrieve SecretKey and SecretId.

2. Quick Start

1. Install

In the cloned project during the preparation stage, you can use npm to install the CLI:

npm install -g edgeone

npm install -g edgeone --registry=https://registry.npmjs.org

Use the edgeone -v command to check if the installation is successful. Use the edgeone -h command to view all relevant commands.

2. Log in

Execute the login command and enter your SecretKey and SecretId as prompted to complete the login.

edgeone login

After completing the login, you can use the edgeone whoami command to view the current login account information.

3. Initialize

After successful login, execute the initialization command to initialize the basic environment required by Edgeone Pages in the project:

edgeone pages init

After initialization, a functions folder and sample functions will be generated in the root directory of the project. You can continue to add and develop functions in this folder. Refer to the documentation for detailed usage of the functions.

4. Local Development

After completing initialization, enter the local development stage:

edgeone pages dev

Executing the command will start a service on the local port 8088 by default. You can access the sample function via http://localhost:8088/helloworld. Here, the access path is the address path of the function file in the functions folder.

During local development, the service for Pages Functions and the service for the Pages project may run on different ports. In order to allow the Pages project to call functions, you can use a proxy server or reverse proxy to forward requests to the correct port. Here is an example configuration of webpack-dev-server:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8088', // Local Development Service Address for Pages Function
        chagneOrigin: true,
        pathRewrite: {
          '^/api': '',
        }
      }
    }
  }
}

In this way, use the Fetch API in the Pages project:

fetch('/api/my-functions', {
    method: 'POST',
    body: JSON.stringify({ data: 'example' }),
})

5. Associated Project

If you need to use the Key-Value Storage capability or synchronize the environment variables set in the console to local debugging, you can execute the Associated Project commands, enter the project name as required. The project name here is the one created in the Preparation Work of the Pages project.

edgeone pages link

6. Submit for deployment

After local development and debugging are completed, push the project code to the Git remote to trigger the CI build and deployment in the Pages backend, completing the entire development process.

Contact

If you need technical support, please contact us