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.

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).

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

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

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.

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.

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

You should end up with something like this:

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:

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 to read more about Wrangler.