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.