Reverse Proxy First Steps

This is Article 2 in my Reverse Proxy Series.

In the next ~30 minutes, you'll have two different sites running under one URL.

We'll use a Cloudflare Worker to:

  • serve Site A at /
  • serve Site B at /blog

It will be ugly, fragile, and not production-ready. That's the point. You're learning the shape of the thing.

What We're Building

End goal: a Cloudflare Worker that does this:

  • https://your-worker-url.workers.dev/ → Site A
  • https://your-worker-url.workers.dev/blog → Site B

You can swap in your own Webflow projects later. For now, we'll use placeholders.

Prerequisites

You'll need:

  • Node installed
  • Bun installed
  • VSCode / Cursor / any other IDE you want, idc.
  • A Cloudflare account
  • Two sites you can proxy (e.g.:
    • https://site-a.webflow.io
    • https://site-b.webflow.io)

Step 1 – Create the project

Make a directory and initialise a new bun project.

From your terminal:

mkdir reverse-proxy-mwe

cd reverse-proxy-mwe

bun init

When Bun asks about templates, pick the simplest option (or just hit Enter).

Now:

mkdir src

touch src/index.js

If Bun created a src/index.ts for you, you can delete it.

Step 2 – Install Wrangler

Wrangler is Cloudflare's CLI for deploying Workers.

Inside your project:

bun i wrangler

This adds Wrangler to your project so you can run it with bunx.

Step 3 – Write the Worker

Open src/index.js and paste this:

export default {
  async fetch(request) {
    const url = new URL(request.url);
    let targetUrl;
    
    // If the path starts with /blog, send the user to Site B
    if (url.pathname.startsWith('/blog')) {
      targetUrl = 'https://site-b.webflow.io';
    } else {
      // Everything else goes to Site A
      targetUrl = 'https://site-a.webflow.io';
    }
    
    const response = await fetch(targetUrl);
    return response;
  },
};

Replace:

  • https://site-a.webflow.io with your first site
  • https://site-b.webflow.io with your second site

Keep them as full https:// URLs.

The code simply exports an object with a fetch function in it. The function gets the requested url, checks if it starts with /blog or not and fetches the data from the relevant project.

Step 4 – Add wrangler.toml

Create a wrangler.toml file in the project root:

touch wrangler.toml

Add this:

name = "my-super-simple-reverse-proxy"
main = "src/index.js"
compatibility_date = "2024-01-01"

You can set compatibility_date to today's date in YYYY-MM-DD format if you prefer, but it must be a real date, not in the future.

This is what wrangler will read for your configuration in Cloudflare.

Step 5 – Deploy to Cloudflare

From the project root:

bun wrangler deploy

The first time you run this, Wrangler will:

  • Open a browser window ask you to log in to Cloudflare
  • ask you to authorise Wrangler

Follow the prompts, then run bun wrangler deploy again if it didn't finish.

At the end, Wrangler will print something like:

https://my-super-simple-reverse-proxy.your-name.workers.dev

That's your Worker URL.

Step 6 – Test It

Open the Worker URL in your browser:

  1. Go to https://my-super-simple-reverse-proxy.your-name.workers.dev/ You should see Site A.
  2. Then go to https://my-super-simple-reverse-proxy.your-name.workers.dev/blog You should see Site B.

If that works, your reverse proxy is alive.

What You Just Built

You now have:

  • a Cloudflare Worker running at the edge
  • simple logic that:
    • checks the incoming path
    • proxies /blog to one site
    • proxies everything else to another site

It's not:

  • handling query strings
  • handling redirects
  • touching HTML

And that's fine.

You've just spun up a very simplistic reverse proxy.

Next, we'll start tightening it up and making it behave more like something you'd trust on a real domain.