Skip to Content
ExamplesRuntimesCloudflare WorkersBasic App

Create a Basic Cloudflare Workers App

A single resource answering GET /, served by a Worker fetch handler

Steps

Folder Structure End State

    • app.js

Install Node

Install Node  (v20+).

Set Up the Project

Create a folder for the project and move into it.

mkdir my-project cd my-project

Create a package.json file. The -y flag skips the questions npm init would otherwise ask and accepts the default answer for each one.

npm init -y

npm init -y does not add a start script, so add one that runs the app. The command in “Run the Drash App”, under Verification, runs this script.

npm pkg set scripts.start="wrangler dev app.js"

Install the dependencies.

npm install @drashland/drash npm install --save-dev wrangler

Create the Following File

app.js
import { Application, Resource, } from "@drashland/drash/modules/http.native.js"; class Home extends Resource { // Create a resource. paths = ["/"]; // Tell it which path(s) it answers to. GET(request) { // Handle GET requests to those paths. console.log(`Received request: ${request.url}`); return new Response( // This is what `app.handle()` resolves with. `Oh so easy (written at ${new Date()})`, ); } } const app = Application .builder() // Get the app's builder so we can build the app easily. .resources(Home) // Add the `Home` resource to the app. .build(); // Build the app. // Cloudflare requires a default export with a `fetch` function on it. Write // this as `async fetch(request)` if you need `await` inside it. export default { fetch(request) { // Handle every request Cloudflare routes here. return app // Let the app .handle(request) // handle the request, and .catch((error) => { // catch anything it throws. if (request.url.includes("favicon")) { return new Response(); // Browsers ask for this; ignore it. } console.log(`Request URL hit an error: ${request.url}:\n`); console.log({ error }); return new Response( // Everything else gets a 500. "Sorry, but we hit an error!", { status: 500, statusText: "Internal Server Error", }, ); }); }, };

Verification

Run the Drash App

Run it using Cloudflare’s Wrangler CLI .

npm start

Note: npm start is defined in the package.json file and runs wrangler dev app.js.

You should see output similar to:

⛅️ wrangler 4.121.0 ------------------- ⎔ Starting local server... [wrangler:inf] Ready on http://localhost:8787

Open It

Go to the Wrangler local server at http://localhost:8787 . You should see something like the following:

Oh so easy (written at Wed Nov 01 2023 22:04:56 GMT-0400 (Eastern Daylight Time))

Notes

Workers provide a global URLPattern, so this uses the native entry point — see About > Concepts > Native vs. Polyfill. The chain is built once at module scope and reused across requests in the same isolate.

Every named export of a Worker entry module must be a function, a class, or an ExportedHandler. workerd treats named exports as potential entrypoints and validates them at startup, so a stray constant like export const hostname = "localhost" aborts the Worker before it serves anything.

That is why this example has no hostname/port constants, unlike the others — wrangler decides the address, and exporting them would break the Worker. Keep any configuration values as module-local consts.

The finished app is in the repository at examples/runtimes/cloudflare-workers/basic-app.

Last updated on