Skip to content

Advance Cloudflare Workers: How to Build and Deploy Your App to Cloudflare Workers

In a recent JavaScript Marathon live training by Software Engineer Jon Kuperman, viewers learned how to build and deploy their own Cloudflare workers.

If you would like to watch this training for yourself, you can check out JavaScript Marathon on YouTube. Otherwise, I invite you to follow along as I review the major points covered in this training, with code examples that you can implement right now!

🔗What is Serverless?

Before Serverless, if you wanted to deploy your application, you would need an organization to provide a server for you. Additionally, you would have to spend time configuring the server, managing it, setting up its security, handling upgrades, balancing load, and more.

Serverless computing is a cloud computing execution model through which the cloud provider allocates machine resources on-demand, taking care of the servers on behalf of their customers.

Serverless allows you to deploy your project without worrying about the operating system, configuration, system upgrades, or anything related to the server.

Popular Serverless cloud providers include Google Cloud Platform (GCP), Amazon Web Services (AWS), Deno, and Cloudflare Workers.

🔗What is Cloudflare Workers?

Cloudflare Workers is a platform for enabling serverless functions to run as close as possible to the end user. The serverless code itself is 'cached' on the network, and runs when it receives the right type of request.

Cloudflare Workers runs on Google's V8 engine, which is the same engine that Google Chrome and Node.js run on. The Cloudflare Workers' code is deployed to all of Cloudflare's data centers. Unlike other serverless platforms, on which your code will run in its own virtual machine, with Cloudflare Workers, your code runs in V8 isolate.

A V8 isolate is made of lightweight contexts that provide your code with variables it can access, and a safe environment to be executed within.

🔗Terminology Used

  • Workers: Cloudflare's Serverless platform.
  • Wrangler: Cloudflare's command-line tool. Used to build, test and deploy Workers.

🔗Simple Workers Use Cases

  • Modifying headers
  • Adding a bot detector score
  • Validating form data
  • Managing redirects
  • URL shortener

🔗How Cloudflare Workers Work

Cloudflare Workers runs on the edge of the Cloudflare network in between the user and the rest of the Internet, effectively running within the network itself. They make http calls by sending a request and receiving a response using the fetch API.

How Cloudflare Workers work

How Cloudflare Workers work

🔗Build Your First Worker with Wrangler

🔗Getting Started

To successfully build and deploy a worker, install a code editor and Node Package Manager (npm). This comes pre-installed with NodeJS.

After installation, navigate to your terminal, and install Cloudflare's wrangler with the command below:

npm install -g wrangler

Now you can use wrangler to generate a new Worker project, using this command:

wrangler init projectName

You could add a -y flag to the above command to accept everything as default. But for this, we will go through the questions and instructions.

Sample of CLI infor

Wrangler creates a directory with the name of the project and a wrangler.toml configuration file. Then it asks to initialize a git repository in the same directory, creates a package.json file and installs the dependencies, and asks if you want to use TypeScript. After this, it finally asks if you would like to create a worker. You can then tailor your answers to your specifc use cases.

File Structure

The default src/index.ts code will look something like the below code.

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export default {
  async fetch(request: Request): Promise<Response> {
    return new Response("Hello World!");
  },
};

This is a module exporting an object of fetch for a worker that takes in a request and returns Hello World!

To use wrangler to run the application, you will run the command below:

wrangler dev

Wrangler dev command output

Your project will start on http://localhost:8787 with key commands on the CLI to interact with your application. If you hit command b, this will open up the browser with http://localhost:8787.

And that is your first worker for Cloudflare Workers.

🔗Conclusion

Cloudflare Workers is a serverless platform, and you can build and deploy your projects with access to other amazing features from Cloudflare such as having access to Cloudflare's global CDN.

If you want to learn more, I encourage you to watch Jon Kuperman's in depth training, Advance Cloudflare Workers to follow along with him!


This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdot.co

You might also like

JS Marathon

Announcing October JavaScript Marathon - Free, online training!

JS Marathon

Announcing September JavaScript Marathon - Free, online training!

JS Marathon

Announcing July JavaScript Marathon - Free, online training!

JS Marathon

Announcing Free Monthly JavaScript Training with JavaScript Marathon!