Cloudflare Workers

I’m not sure who coined the term serverless. Servers are still involved, but you don’t have to worry about managing them. You write some basic functions, and then deploy those to the cloud. The cloud will handle the provisioning, distribution, security, and everything else. The Serverless computing definition on Wikipedia does a good job of explaining this new tech.

Cloudflare Workers is one of the easiest, and cost effective ways to get started with serverless. Cloudflare has servers in 193+ data centers, so your code is highly distributed, and scales effortlessly on your part. The only downside is their documentation can be confusing, not just for Workers, but for all of their API. Below are my quick tips.

Getting Started

Install Wrangler, configure it, and generate a new project using a project template that comes with a router. If you don’t use this router, then you will need to either write your own, or create a Cloudflare Worker for each route you want to handle.

npm i @cloudflare/wrangler -g
wrangler config # Go ahead and configure your environment
wrangler generate my-project-name https://github.com/cloudflare/worker-template-router
cd my-project-name

Configuration

You can use your own domain with Workers, or you can use a subdomain of workers.dev. If you’re going to use workers.dev then in the example below you’ll need to chanrge workers_dev to true and remove zone_id.

account_id = "CLOUDFLARE_ACCOUNT_ID" # looks like an MD5 hash
name = "my-worker-name"
type = "webpack"
route = "*example.com/*" # this covers www and non-www
workers_dev = false # this should be true if using workers.dev
# exclude zone_id if you're using workers.dev
zone_id = "CLOUDFLARE_ZONE_ID" # looks like an MD5 hash

[[kv-namespaces]]
binding = "KVSTORE" # you'll use this in your code
id = "KV_NAMESPACE_ID" # looks like an MD5 hash

npm

You can use any npm package with your Worker. Wrangler will package everything up, and deploy it to Cloudflare. Using npm packages can save you a lot of time.

npm i uuid

After installing the package, you can use it, like the example below.

const uuidv4 = require('uuid/v4');

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a request
 * @param {Request} request
 */
async function handleRequest(request) {
    return new Response(JSON.stringify({
        v4: uuidv4()
    }), {
        status: 200,
        headers: {
            "Access-Control-Allow-Origin" : "*",
            "Access-Control-Allow-Credentials" : true
        }
    })
}

HTTP Headers

You may need to send some HTTP headers, such as Cross-Origin Resource Sharing (CORS) as shown below. You can also send your own custom headers.

async function handleRequest(request) {
    return new Response(JSON.stringify({
        v4: uuidv4()
    }), {
        status: 200,
        headers: {
            "Access-Control-Allow-Origin" : "*",
            "Access-Control-Allow-Credentials" : true
        }
    })
}

Here are some custom headers I set when building a QR Code CDN.

const headers = {
    'Content-Type': 'image/svg+xml',
    'message-data': qrtext,
    'Cache-Control': 'max-age=31536000',
    'qr-cdn-version': '1.0.0'
}

KV Store

There are probably plenty of use-cases for their KV (key-value) store, but I’ve only used it for some basic logging. When I built the QR Code generator, I have it logging the IP address of the user who first requested the QR code. In the configuration above, you can see where you set the binding to use in your code.

KVSTORE.put('your-key', 'your value!');

Conclusion

This was meant to be a short post, but I hope you find some value in it.