Setting up a new Cloudflare Worker with a custom domain.
Tags: cloudflare, worker, tutorial, javascript
Published: 2023-10-28 16:41:02

## Introduction

Cloudflare is a compelling choice for deploying your web app. Their reliability, scalability, and performance are second-to-none. They're also extremely cheap.

However, one annoying thing about Cloudflare is that they offer so many products and so much configuration, that it is sometimes a pain to do the simple things. This post aims to cut through the occasionally confusing Cloudflare dashboard to get you set up with up a Cloudflare Worker on a custom domain.

## Part 1: Creating Your Cloudflare Worker

In your dashboard, go to `Workers and Pages` in the sidebar.

On the `Overview` page, click `Create Application`.

![Create Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6iry8th015nqeb0kd7s.png)

Then, on the `Workers` tab, click `Create Worker`. (Note that you can do this via the CLI, but I'm doing it like this because I already have the repo setup and I want to control how the app is added there).

![Create Worker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwn1pcgp0t0t9y0l45bu.png)

Now, it's time to personalise your worker by giving it a unique identity. Name your worker appropriately.

![Name Your Worker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttfuvopoa1f13xwm1dpx.png)

Once you're satisfied with the name, click the `Deploy` button.

![Click Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxacjh8gb7862ivmla42.png)

Congratulations! Your worker is now poised to conquer the digital world.

## Part 2: Using Your Custom Domain

Transition now back to your Cloudflare dashboard home page. Navigate to `Websites` and then `Add a Site`.

![Add a site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r1vpo5qmpoldvw90l20.jpg)

### Configuring DNS Records
A crucial part of this setup involves creating DNS A Records. You'll set up two: the first will link the root domain (e.g., runestone.io), and the second, acting as a wildcard, will ensure all your sub-domains connect to your worker seamlessly.

![Configure DNS Records](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43bhupgzm9w75tankzca.png)

**NB: It's very important that you have changed your nameservers to those shown on this page (see image above).** You'll have to wait until these have resolved before seeing the fruits of your labour, but we can continue anyway.

## Part 3: Hooking up Your Domain and Worker

### Setting up Routes in Your Worker
Go to `Workers and Pages -> [your worker name] -> Triggers tab`, then scroll down to the `Routes` section, and add two routes:

1. `[your-domain]/*` (to handle the root)
2. `*.[your-domain]/*` to handle everything else

![Worker Routes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o7ujwamkhrzg6uqf02p.png)

You should end up with something like this:

![Routes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qdlx8wx9m7kdraz47i4.jpg)

### Final Checks and Activation

Now the moment of truth. If everything has gone well, you should be able to visit your domain and see the "Hello World!" from your worker:

![Root domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26p13grwopkymetf3i8k.png)


![Subdomain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/netjh5s5k3sb4pvrvbk9.png)

## Conclusion

Setting up a Cloudflare worker with a custom domain and dynamic sub-domains might seem like a daunting task, but it's not that difficult once you know where to look. I hope this helped!

Next up for you is to actually build your application. It's highly recommended to use Cloudflare's CLI tool `Wranger`, which will enable you to develop locally, bundle, and deploy to various environments. Start [here](https://developers.cloudflare.com/workers/wrangler/) to read more about Wrangler.