Development

Starting from version v2.0, we have adopted Functions Advanced Mode + Wrangler Pages Dev development approach

This means you can develop your own image hosting service locally very easily

Prerequisites

First, you need to clone this repository

git clone https://github.com/Stoeaves/Cf-Github-ImgBed.git

Then enter the project root directory

cd Cf-Github-ImgBed

Install dependencies

npm install

Getting Started

You can create a wrangler.toml file in the root directory to store your local development variables

No need to worry about leaks, this file is ignored by .gitignore, so it won't be uploaded to GitHub

Here is an example content of the wrangler.toml file:

[[kv_namespaces]]
binding = "KV"
id = "xxxxxxxxx"

[vars]
ADMIN_PASSWORD = "xxx"
GITHUB_TOKEN = "ghp_xxxxxxxxxxxxxxxxxxxx"
RSA_PRIVATE_KEY = "xxx"
RSA_PUBLIC_KEY = ""

Simply copy this example content and fill in the corresponding values

Then we can start development, run:

npm run dev

Then you will likely see a prompt like this:

> cloudflare-github-imgbed@2.0.0 dev
> npm-run-all -p dev:*


> cloudflare-github-imgbed@2.0.0 dev:build
> vite build --watch


> cloudflare-github-imgbed@2.0.0 dev:pages
> wrangler pages dev dist

vite v7.3.3 building client environment for production...

watching for file changes...

build started...
transforming (38) node_modules\@vue\reactivity\dist\reactivity.esm-bundler.js

 ⛅️ wrangler 4.93.1
───────────────────

✨ Compiled Worker successfully
✓ 38 modules transformed.
dist/index.html                   0.90 kB │ gzip:  0.53 kB
dist/assets/index-Ch5P55Iw.css   49.97 kB │ gzip:  7.60 kB
dist/assets/index-DT0cRIPn.js   183.12 kB │ gzip: 61.82 kB
built in 1000ms.
Your Worker has access to the following bindings:
Binding                                                                   Resource                  Mode
env.KV (xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)                                 KV Namespace              local
env.CF_PAGES ("1")                                                        Environment Variable      local
env.CF_PAGES_BRANCH ("main")                                              Environment Variable      local
env.CF_PAGES_COMMIT_SHA ("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...")      Environment Variable      local
env.CF_PAGES_URL ("https://xxxxxxx.Cloudflare-Github-Img...")             Environment Variable      local
env.ADMIN_PASSWORD ("xxxxxx")                                             Environment Variable      local
env.GITHUB_TOKEN ("ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...")             Environment Variable      local
env.RSA_PRIVATE_KEY ("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...")          Environment Variable      local
env.RSA_PUBLIC_KEY ("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...")           Environment Variable      local

╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│  [b] open a browser [d] open devtools [e] open local explorer [t] start tunnel [c] clear console [x] to exit  │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
[wrangler:info] Ready on http://127.0.0.1:8788

At this point, you can open http://127.0.0.1:8788 in your browser for local debugging

And when you modify the code, it will automatically recompile, you just need to refresh the browser page

If you want to change the port of the local debug address, you can add the following to wrangler.toml:

[dev]
port = 8788

Deploy

When you have completed development, you can deploy using the following commands:

npm run build
npm run deploy

Important Notes

During local development, ensure that the ADMIN_PASSWORD, GITHUB_TOKEN, RSA_PRIVATE_KEY, RSA_PUBLIC_KEY values in your wrangler.toml file are correct, and the KV id is correct