Skip to content

yunsii/cf-worker-status-page-pro

Repository files navigation

Cloudflare Worker - Status Page Pro

Monitor your websites, showcase status including daily history, and get Slack notification whenever your website status changes. Using Cloudflare Workers, CRON Triggers, and KV storage. Check my status page out! 🚀

Features

  • 🦄 Written in TypeScript
  • ✨ Support remote csv monitors
  • 🚀 No limit for max monitors of cron task, even with workers KV free tier
  • 🪁 Auto GC for KV value size
  • 💎 More DX/UX detail you want

Pre-requisites

You'll need a Cloudflare Workers account with

Also, prepare the following secrets

  • Cloudflare API token with Edit Cloudflare Workers permissions
  • Slack incoming webhook (optional)
  • Discord incoming webhook (optional)

Getting started

You can use GitHub Actions to deploy on your own.

  1. You should use this template to create a new repository

  2. Navigate to your new GitHub repository > Settings > Secrets and variables > Actions and add the following secrets:

    - Name: CLOUDFLARE_API_TOKEN
    
    - Name: SECRET_SLACK_WEBHOOK_URL (optional)
    - Value: your-slack-webhook-url
    
    - Name: SECRET_DISCORD_WEBHOOK_URL (optional)
    - Value: your-discord-webhook-url
  3. Edit config.ts to adjust configuration and list all of your websites/APIs you want to monitor

  4. Push to master branch to trigger the deployment

  5. 🎉

  6. (optional) Go to Cloudflare Workers settings and assign custom domain/route

  7. (optional) Edit wrangler.toml to adjust Worker settings or CRON Trigger schedule, especially if you are on Workers Free plan

Workers KV free tier

The Workers Free plan includes limited KV usage, but the quota is sufficient for 2-minute checks only

  • Change the CRON trigger to 2 minutes interval (crons = ["*/2 * * * *"]) in wrangler.toml

Known issues

Running project locally

Requirements

  • Pnpm (npm i -g pnpm)

Steps to get server up and running

Install dependencies

pnpm i

Login With Wrangler to Cloudflare

npx wrangler login

Create your KV namespace in cloudflare

On the workers page navigate to KV, and create a namespace

Update your wrangler.toml with

kv-namespaces = [{binding="KV_STORE", id="<KV_ID>", preview_id="<KV_ID>"}]

Note: you may need to change kv-namespaces to kv_namespaces

Run

pnpm run dev

Remote CSV Monitors

You can use remote CSV monitors like this template. You can get the URL by File > Share > Publish to web and select specific sheet and Comma-separated values (.csv).

Credits