A First Look at Cloudflare Workers
Tags: cloudflare, service, worker, wrangler
Published: 2021-05-03 07:39:01

---
canonical_url: "https://ajcwebdev.com/first-look-cloudflare-workers/"
description: "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."
---

## Outline

- [Introduction](#introduction)
- [Install the Wrangler CLI](#install-the-wrangler-cli)
  - [Install Wrangler with Volta](#install-wrangler-with-volta)
  - [Login to Cloudflare Account](#login-to-cloudflare-account)
- [Create Workers Project](#create-workers-project)
  - [Wrangler Configuration File](#wrangler-configuration-file)
  - [Workers Script](#workers-script)
  - [Test Worker Locally](#test-worker-locally)
- [Deploy Worker to Cloudflare](#deploy-worker-to-cloudflare)

> ___All of this project's code can be found in the [First Look monorepo](https://github.com/ajcwebdev/a-first-look/tree/main/deployment/cloudflare-workers/) on my GitHub.___

## Introduction

A [Cloudflare Worker](https://blog.cloudflare.com/introducing-cloudflare-workers/) contains JavaScript that runs on Cloudflare's edge servers. A [Cloudflare Service Worker](https://blog.cloudflare.com/cloudflare-workers-unleashed/) 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](https://developer.mozilla.org/en-US/docs/Web/API/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`](https://github.com/cloudflare/wrangler) is an officially supported CLI tool for [Cloudflare Workers](https://workers.cloudflare.com/).

### Install Wrangler with Volta

[Volta.sh](https://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`).

```bash
curl https://get.volta.sh | zsh
volta install node
npm install -g wrangler
```

Visit the [Workers documentation](https://developers.cloudflare.com/workers/wrangler/get-started/) if you encounter issues while trying to install Wrangler. Check the version number with the following command:

```bash
wrangler --version
```

> Note: In this article I used version `2.0.8`.

### Login to Cloudflare Account

```bash
wrangler login
```

## Create Workers Project

You can generate a boilerplate Workers project with [`wrangler init`](https://developers.cloudflare.com/workers/wrangler/commands/#init), but in this example we'll start from a blank directory.

```bash
mkdir ajcwebdev-workers
cd ajcwebdev-workers
```

Initialize a `package.json` and install the Wrangler dependency.

```bash
yarn init -y
yarn add -D wrangler
```

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

```bash
echo > index.js
echo > wrangler.toml
echo 'node_modules\n.DS_Store' > .gitignore
```

### Wrangler Configuration File

`wrangler` uses a [`wrangler.toml` configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/) to customize the development and publishing setup for a Worker. Add the following to `wrangler.toml` and include your own project name. 

```toml
# wrangler.toml

name = "ajcwebdev-workers"
main = "index.js"
compatibility_date = "2022-06-09"
```

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:

```javascript
// index.js

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

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`](https://developers.cloudflare.com/workers/wrangler/commands/#dev).

```bash
wrangler dev
```

Open [localhost:8787/](http://localhost:8787/) to see the response or use `curl` to send an HTTP GET method.

```bash
curl "http://localhost:8787/"
```

> Note: Add `-i` option to see header information.

## Deploy Worker to Cloudflare

`wrangler publish` publishes your Worker to Cloudflare.

```bash
wrangler publish
```

Output:

```
Uploaded ajcwebdev-workers (0.76 sec)
Published ajcwebdev-workers (0.20 sec)
  ajcwebdev-workers.anthonycampolo.workers.dev
```

```bash
curl "https://ajcwebdev-workers.anthonycampolo.workers.dev"
```

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

![01-insomnia-request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjm39zouurqqedcfxz82.png)

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

![02-browser-request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b503pfgqlau3bvn99xx.png)

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

![03-response-headers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2g1kvq0sti966h0avjj.png)

You can check out this amazing website yourself [here](https://ajcwebdev-workers.anthonycampolo.workers.dev/).