Learn Cloudflare-workers - 10 Code Examples & CST Typing Practice Test

Cloudflare Workers is a serverless platform for deploying JavaScript, TypeScript, and Rust functions at the edge, allowing developers to run code globally close to end-users with low latency.

View all 10 Cloudflare-workers code examples →

Simple Cloudflare Worker (JavaScript)Cloudflare Worker with JSON Response Cloudflare Worker Redirect Cloudflare Worker Echo Request Cloudflare Worker with Query Parameters Cloudflare Worker with HTML Response Cloudflare Worker with Custom Headers Cloudflare Worker Fetch External API Cloudflare Worker with Environment Variable Cloudflare Worker with Conditional Response

Learn CLOUDFLARE-WORKERS with Real Code Examples

Updated Nov 25, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Cloudflare Worker (JavaScript)

# cloudflare/demo/worker.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('Hello, World!', { status: 200 })
}

A basic Cloudflare Worker that responds with 'Hello, World!' to HTTP requests.

Let’s Try →

Cloudflare Worker with JSON Response

# cloudflare/demo/json.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const data = { message: 'Hello, JSON World!' }
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    })
}

A Cloudflare Worker returning a JSON response.

Let’s Try →

Cloudflare Worker Redirect

# cloudflare/demo/redirect.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return Response.redirect('https://example.com', 302)
}

A Worker that redirects all requests to another URL.

Let’s Try →

Cloudflare Worker Echo Request

# cloudflare/demo/echo.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('You requested: ' + request.url, { status: 200 })
}

A Worker that echoes back the request URL.

Let’s Try →

Cloudflare Worker with Query Parameters

# cloudflare/demo/query.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const url = new URL(request.url)
    const name = url.searchParams.get('name') || 'Guest'
    return new Response('Hello, ' + name, { status: 200 })
}

A Worker that reads query parameters and responds with them.

Let’s Try →

Cloudflare Worker with HTML Response

# cloudflare/demo/html.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const html = '<!DOCTYPE html><html><body><h1>Hello HTML World!</h1></body></html>'
    return new Response(html, {
        status: 200,
        headers: { 'Content-Type': 'text/html' }
    })
}

A Worker responding with a basic HTML page.

Let’s Try →

Cloudflare Worker with Custom Headers

# cloudflare/demo/headers.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('Custom Header Added', {
        status: 200,
        headers: { 'X-Custom-Header': 'MyWorker' }
    })
}

A Worker that adds custom headers to the response.

Let’s Try →

Cloudflare Worker Fetch External API

# cloudflare/demo/fetch-api.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const apiResponse = await fetch('https://api.github.com')
    const data = await apiResponse.json()
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    })
}

A Worker fetching data from an external API and returning it.

Let’s Try →

Cloudflare Worker with Environment Variable

# cloudflare/demo/env.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const apiKey = MY_SECRET_API_KEY
    return new Response('API Key length: ' + apiKey.length, { status: 200 })
}

A Worker using environment variables from Cloudflare KV or Secrets.

Let’s Try →

Cloudflare Worker with Conditional Response

# cloudflare/demo/method.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    if (request.method === 'POST') {
        return new Response('You sent a POST request', { status: 200 })
    } else {
        return new Response('You sent a GET request', { status: 200 })
    }
}

A Worker responding differently based on request method.

Let’s Try →

Frequently Asked Questions about Cloudflare-workers

What is Cloudflare-workers?

Cloudflare Workers is a serverless platform for deploying JavaScript, TypeScript, and Rust functions at the edge, allowing developers to run code globally close to end-users with low latency.

What are the primary use cases for Cloudflare-workers?

Edge APIs and middleware. Request/response manipulation for websites. Bot and security logic at the edge. Global serverless functions and microservices. Integrating with KV storage or Durable Objects

What are the strengths of Cloudflare-workers?

Ultra-low latency due to edge execution. Scales automatically with traffic. Integrates with Cloudflare security and performance tools. Supports multiple runtimes and WebAssembly. No infrastructure or server maintenance required

What are the limitations of Cloudflare-workers?

Vendor lock-in to Cloudflare network. Limited runtime execution duration (50ms-10s typical). Cold start negligible but complex workflows may require orchestration. Limited built-in debugging compared to traditional servers. State persistence requires KV, Durable Objects, or external storage

How can I practice Cloudflare-workers typing speed?

CodeSpeedTest offers 10+ real Cloudflare-workers code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Cloudflare Worker (JavaScript)

# cloudflare/demo/worker.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('Hello, World!', { status: 200 })
}

A basic Cloudflare Worker that responds with 'Hello, World!' to HTTP requests.

Let’s Try →

Cloudflare Worker with JSON Response

# cloudflare/demo/json.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const data = { message: 'Hello, JSON World!' }
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    })
}

A Cloudflare Worker returning a JSON response.

Let’s Try →

Cloudflare Worker Redirect

# cloudflare/demo/redirect.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return Response.redirect('https://example.com', 302)
}

A Worker that redirects all requests to another URL.

Let’s Try →

Cloudflare Worker Echo Request

# cloudflare/demo/echo.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('You requested: ' + request.url, { status: 200 })
}

A Worker that echoes back the request URL.

Let’s Try →

Cloudflare Worker with Query Parameters

# cloudflare/demo/query.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const url = new URL(request.url)
    const name = url.searchParams.get('name') || 'Guest'
    return new Response('Hello, ' + name, { status: 200 })
}

A Worker that reads query parameters and responds with them.

Let’s Try →

Cloudflare Worker with HTML Response

# cloudflare/demo/html.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const html = '<!DOCTYPE html><html><body><h1>Hello HTML World!</h1></body></html>'
    return new Response(html, {
        status: 200,
        headers: { 'Content-Type': 'text/html' }
    })
}

A Worker responding with a basic HTML page.

Let’s Try →

Cloudflare Worker with Custom Headers

# cloudflare/demo/headers.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('Custom Header Added', {
        status: 200,
        headers: { 'X-Custom-Header': 'MyWorker' }
    })
}

A Worker that adds custom headers to the response.

Let’s Try →

Cloudflare Worker Fetch External API

# cloudflare/demo/fetch-api.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const apiResponse = await fetch('https://api.github.com')
    const data = await apiResponse.json()
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    })
}

A Worker fetching data from an external API and returning it.

Let’s Try →

Cloudflare Worker with Environment Variable

# cloudflare/demo/env.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const apiKey = MY_SECRET_API_KEY
    return new Response('API Key length: ' + apiKey.length, { status: 200 })
}

A Worker using environment variables from Cloudflare KV or Secrets.

Let’s Try →

Cloudflare Worker with Conditional Response

# cloudflare/demo/method.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    if (request.method === 'POST') {
        return new Response('You sent a POST request', { status: 200 })
    } else {
        return new Response('You sent a GET request', { status: 200 })
    }
}

A Worker responding differently based on request method.

Let’s Try →

Frequently Asked Questions about Cloudflare-workers

What is Cloudflare-workers?

Cloudflare Workers is a serverless platform for deploying JavaScript, TypeScript, and Rust functions at the edge, allowing developers to run code globally close to end-users with low latency.

What are the primary use cases for Cloudflare-workers?

Edge APIs and middleware. Request/response manipulation for websites. Bot and security logic at the edge. Global serverless functions and microservices. Integrating with KV storage or Durable Objects

What are the strengths of Cloudflare-workers?

What are the limitations of Cloudflare-workers?

How can I practice Cloudflare-workers typing speed?

CodeSpeedTest offers 10+ real Cloudflare-workers code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.