Cloudflare Edge Commander

A lightweight Next.js control panel for managing Cloudflare accounts, zones, DNS records and useful network utilities. Built for deployment on Cloudflare using OpenNext + Wrangler.

Explore the code »

View Demo · Report Bug · Request Feature

---

About The Project

Cloudflare Edge Commander provides a simple UI to interact with Cloudflare's API through a secure server-side proxy. It focuses on:

• Managing Cloudflare accounts, zones and DNS records
• Inspecting and editing DNS records easily
• Configuring SSL/CA and common zone settings
• Small network utilities (IPv6 <-> arpa conversion, random IPv6 generation, reverse mapping)
• Streaming client-side logs to an on-page console

The server-side proxy lives in functions/api/cloudflare.ts and is intended to run as a Cloudflare Pages Function (OpenNext). Credentials are proxied from the server—do not store keys in the client.

(back to top)

Built With

• Next.js (App Router + React)
• OpenNext / @opennextjs/cloudflare (Cloudflare deployment integration)
• TypeScript
• Tailwind CSS + DaisyUI
• Lucide Icons
• Wrangler (worker / Pages configuration)

(back to top)

---

Table of Contents

• Getting Started
• Features
• Usage
• Security & Environment
• Project Structure
• Contributing
• License
• Contact
• Acknowledgments

(back to top)

---

Getting Started

Follow these instructions to get a local copy up and running.

Prerequisites

• Node.js 18+ and npm
• A Cloudflare account (for API tokens and deployment)
• Wrangler CLI (used for Pages / Workers deployment)

Installation

1. Clone the repo:

   git clone https://github.com/LoveDoLove/cloudflare-edge-commander.git
   cd cloudflare-edge-commander

2. Build the project:

   npm run build

3. Deploy the project:

   npm run deploy

(back to top)

---

Features

• Dashboard to manage Cloudflare accounts & zones
• DNS record inspector and editor
• Zone settings & SSL helper workflows
• Network lab utilities (IPv6 tools, reverse mapping, random address generation)
• Live client-side log console

(back to top)

---

Usage

Run local development server:

npm run dev

Build for production and test locally:

npm run build
npm run preview

Other useful scripts:

• npm run upload — upload static assets
• npm run lint — run ESLint
• npm run cf-typegen — regenerate Cloudflare types

(back to top)

Security & Environment

• Do not embed API keys or global API keys in client-side code.
• Use Wrangler secrets or environment variables to store production credentials (e.g., CF_API_TOKEN, CF_ACCOUNT_ID).
• Prefer API Tokens over Global API Keys and grant only the scopes needed by the app.

Note: The local dev experience may accept temporary credentials for convenience, but treat them carefully and never commit them.

(back to top)

---

Project Structure

• src/app/ — Next.js App Router pages and layout
• src/components/ — UI components and overlays
• src/hooks/ — hooks and cloudflare manager (useCloudflareManager.ts)
• functions/api/cloudflare.ts — server-side proxy (Pages Function)
• wrangler.jsonc — deployment configuration
• cloudflare-env.d.ts — Cloudflare env types

(back to top)

---

Contributing

Contributions are welcome! Please open issues for bugs and feature requests, then send a pull request. Suggested workflow:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature
3. Commit changes: git commit -m "Add feature"
4. Push and open a PR

(back to top)

Top contributors:

---

License

Distributed under the Apache License 2.0. See LICENSE for details.

(back to top)

---

Contact

Maintainer: LoveDoLove — https://github.com/LoveDoLove

Project: https://github.com/LoveDoLove/cloudflare-edge-commander

(back to top)

---

Acknowledgments

• OpenNext (OpenNext.js)
• Cloudflare docs & API
• Best README Template
• Tailwind Labs and DaisyUI
• Lucide Icons

(back to top)