Logo

dev-resources.site

for different kinds of informations.

Bootstrapping Cloudflare Workers app with oak framework & routing controller

Published at
6/30/2024
Categories
worker
typescript
oak
webhook
Author
thesephi
Categories
4 categories in total
worker
open
typescript
open
oak
open
webhook
open
Author
8 person written this
thesephi
open
Bootstrapping Cloudflare Workers app with oak framework & routing controller

Hello all,

Following up on my previous introductory post about the library oak-routing-ctrl, I'd love to share an npm script that generates a boilerplate code-base with the following tools built-in:


Part 1: Bootstrapping

npm create oak-cloudflare-worker@latest
Enter fullscreen mode Exit fullscreen mode

This script will ask us a few setup preferences, such as:

  • project directory (we can leave empty to use the current directory)
  • project meta i.e. name, version, author, etc. - basically the things we'd normally declare in the package.json file

Once the last step is confirmed, we'd have a project directory ready to work on. Here's the folder structure:

|____.npmrc
|____.gitignore
|____package.json
|____tsconfig.json
|____wrangler.toml
|____src
  |____index.ts
  |____CfwController.ts
Enter fullscreen mode Exit fullscreen mode

Part 2: Developing

We can now install the dependencies (as declared in package.json) with e.g.:

npm i
Enter fullscreen mode Exit fullscreen mode

Executing npm run dev will start the "Worker" on local:

โŽ” Starting local server...
[wrangler:inf] Ready on http://localhost:8787
โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
โ”‚ [b] open a browser, [d] open Devtools, [l] turn off local mode, [c] clear console, [x] to exit                                      โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
Enter fullscreen mode Exit fullscreen mode

Assuming we use the template example provided in the boilerplate (CfwController.ts), then we can communicate with the Worker like so:

curl http://localhost:8787/echo/devto

{"query":{},"body":{},"param":{"name":"devto"},"headers":{"accept":"*/*","accept-encoding":"br, gzip","host":"localhost:8787","user-agent":"curl/8.6.0"}}
Enter fullscreen mode Exit fullscreen mode

Part 3: Deploying

To deploy to Cloudflare, one way is simply running

npm run deploy
Enter fullscreen mode Exit fullscreen mode

which will guide us through the Cloudflare authentication flow until the application is fully "uploaded" to Cloudflare.

Alternatively, if we don't like going through the authentication flow all the time, we can get a Cloudflare API token. Note that, at the minimum, we'll need the permissions to manage "Workers" resources. I chose these for my example:

Example of Cloudflare API token permissions to manage Worker resources

With the token, one can add it to the env var and run the deployment script e.g. like so:

CLOUDFLARE_API_TOKEN=your-cloudflare-api-token npm run deploy
Enter fullscreen mode Exit fullscreen mode

Closing words

I hope the script

npm create oak-cloudflare-worker@latest
Enter fullscreen mode Exit fullscreen mode

may help you bootstrap your Cloudflare Workers project with ease. It is obviously opinionated on the oak and oak-routing-ctrl libraries, but also there's nothing preventing one from switching to another supporting framework (or writing everything from scratch).

If 'starting from scratch' is your flavour, you can also execute npm create cloudflare@latest (as documented) to start off with an almost-empty Cloudflare Workers project.

In parallel, a GitHub code template also exists as an alternative to running npm create oak-cloudflare-worker.

For transparency: the source code for the npm create script itself is hosted here.

If you've created or plan to create something cool with this script, your story would be so much appreciated in the comment section below ๐Ÿ™. If you got an idea to improve the script, I'm all ears here, or you may simply suggest a PR!

I wish you enjoyments in your next projects ๐Ÿบ๐Ÿบ๐Ÿบ

webhook Article's
30 articles in total
Favicon
Integrating MongoDB Atlas Alerts with Lark Custom Bot via AWS Lambda
Favicon
Replay failed stripe events via webhook
Favicon
Integrating Stripe Payment Intent in NestJS with Webhook Handling
Favicon
Designing a webhook service: A practical guide to event-driven architecture.
Favicon
Creating a user interface for the Webhook module using Angular
Favicon
Recreate shopify webhooks
Favicon
Creating a configurable Webhook module for a NestJS application
Favicon
Forward SMS to Webhook with iPhone Shortcut Automations
Favicon
Understanding Webhooks: How to Handle Them in Your Application
Favicon
Building a community database with GitHub : A guide to Webhook and API integration with hono.js
Favicon
O Que Sรฃo Webhooks e Como Utilizรก-los Eficientemente
Favicon
Simplifying Webhook Handling with Vector.dev: A Modern Solution for Serverless Apps
Favicon
Creating a Websocket server in Hono with Durable Objects
Favicon
Efficient Webhook Handling in Laravel Using Unique Jobs
Favicon
WhatsApp webhook API types
Favicon
Post Reddit posts on Instagram with a simple like on Discord. You will love Webhooks! ๐Ÿช
Favicon
Manage Telegram Webhooks Using curl
Favicon
Bootstrapping Cloudflare Workers app with oak framework & routing controller
Favicon
Webhook Security Approaches
Favicon
Handling Eventual Consistency in Webhook
Favicon
Sending GitHub Secrets to Docker Apps on VMs Using adnanh/webhooks
Favicon
Troubleshooting 5xx errors with your Stripe Webhook
Favicon
LemonSqueezy Webhooks for Non-Auth Users in Laravel
Favicon
How to use the new Symfony Maker command to work with GitHub Webhooks
Favicon
Webhooks: A Mindset Change for Batch Jobs
Favicon
Trigger Jenkins builds with Github Webhook Using Smee Client
Favicon
How to Setup Webhook in Google Form?
Favicon
Ngrok: Exposing local server on the internet
Favicon
Custom Header in Stripe Webhook Payload
Favicon
Mengenal Webhook, API Tanpa Polling

Featured ones: