DEV Community

Cover image for A First Look at Cloudflare Workers
ajcwebdev
ajcwebdev

Posted on • Updated on • Originally published at ajcwebdev.com

A First Look at Cloudflare Workers

Outline

All of this project's code can be found in the First Look monorepo on my GitHub.

Introduction

A Cloudflare Worker contains JavaScript that runs on Cloudflare's edge servers. A Cloudflare Service Worker is a worker written against the Service Worker API and specifically handles HTTP traffic. Cloudflare Workers derive their name from Web Workers, specifically Service Workers.

The Service Worker API is a W3C standard API for scripts that run in the background in a web browser and intercept HTTP requests. Cloudflare Workers are written against the same standard API but run on Cloudflare's edge network instead of the browser.

Install the Wrangler CLI

wrangler is an officially supported CLI tool for Cloudflare Workers.

Install Wrangler with Volta

Volta.sh is a JavaScript tool manager that can be used for global installs and switching between different versions of Node. It can be installed with the following curl command (and if you are not using zsh then change the end of the command to bash).

curl https://get.volta.sh | zsh
volta install node
npm install -g wrangler
Enter fullscreen mode Exit fullscreen mode

Visit the Workers documentation if you encounter issues while trying to install Wrangler. Check the version number with the following command:

wrangler --version
Enter fullscreen mode Exit fullscreen mode

Note: In this article I used version 2.0.8.

Login to Cloudflare Account

wrangler login
Enter fullscreen mode Exit fullscreen mode

Create Workers Project

You can generate a boilerplate Workers project with wrangler init, but in this example we'll start from a blank directory.

mkdir ajcwebdev-workers
cd ajcwebdev-workers
Enter fullscreen mode Exit fullscreen mode

Initialize a package.json and install the Wrangler dependency.

yarn init -y
yarn add -D wrangler
Enter fullscreen mode Exit fullscreen mode

A Workers project can be very concise and the only files required are index.js and wrangler.toml.

echo > index.js
echo > wrangler.toml
echo 'node_modules\n.DS_Store' > .gitignore
Enter fullscreen mode Exit fullscreen mode

Wrangler Configuration File

wrangler uses a wrangler.toml configuration file to customize the development and publishing setup for a Worker. Add the following to wrangler.toml and include your own project name.

# wrangler.toml

name = "ajcwebdev-workers"
main = "index.js"
compatibility_date = "2022-06-09"
Enter fullscreen mode Exit fullscreen mode

This includes three configuration options:

  • name sets the name of your Worker.
  • main sets the entrypoint/path to the file that will be executed.
  • compatibility_date is used to determine which version of the Workers runtime is used.

Workers Script

index.js will contain the content of the Workers script. The script will notify the visitor of your website that you nailed it. Add the following:

// index.js

export default {
  async fetch(request) {
    return new Response("Nailed it!", {
      headers: { 'X-Awesomeness': '9000' }
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

We don't add header X-Awesomeness because we need to, we add it because we can.

Test Worker Locally

Start a local server for developing your Worker with wrangler dev.

wrangler dev
Enter fullscreen mode Exit fullscreen mode

Open localhost:8787/ to see the response or use curl to send an HTTP GET method.

curl "http://localhost:8787/"
Enter fullscreen mode Exit fullscreen mode

Note: Add -i option to see header information.

Deploy Worker to Cloudflare

wrangler publish publishes your Worker to Cloudflare.

wrangler publish
Enter fullscreen mode Exit fullscreen mode

Output:

Uploaded ajcwebdev-workers (0.76 sec)
Published ajcwebdev-workers (0.20 sec)
  ajcwebdev-workers.anthonycampolo.workers.dev
Enter fullscreen mode Exit fullscreen mode
curl "https://ajcwebdev-workers.anthonycampolo.workers.dev"
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can open up your favorite API client and make a GET request to your endpoint.

01-insomnia-request

You can also visit the endpoint with your browser of choice.

02-browser-request

Open up the Network tab to see how much more awesome your response headers are.

03-response-headers

You can check out this amazing website yourself here.

Top comments (0)