Serving a single page with a Cloudflare Worker

Serving a single page with a Cloudflare Worker

Ok, so I may have gone overboard on the dot dev domains, obviously, I purchased melodious.dev and forwarded it to this website but I also purchased two random domains:

I could have just forwarded these domains to melodiouscode.net, but on my lunch break, I decided to chuck some single page sites at them for giggles. I, however, did not want to spend any more money than I already do on domain-related things. In steps Cloudflare workers.

For those that do not know about workers; they are small chunks of javascript that you can run on the "edge" of Cloudflare. This means that you can execute code at the moment that a page is requested from your site. In the case of my serverless approach, the code executes before the page request has the chance to realise there is no web server!

The above code binds to the "page fetch" event before the page request is processed the worker code jumps in and grabs a static piece of HTML from my Azure Blob storage and returns that instead!
It is that simple, with just a few lines of javascript I can serve a simple web page without the need for a web server and at near-zero cost (seeing as I already pay for the workers and the blob storage cost is almost zero).

A quick post for a quick website! I may at some point put something more useful/meaningful/silly onto both of these domains, but for now, remember that you are a great dev because it works on your machine!

Update (15/03/2019)

Whilst monitoring a database migration this evening I decided to have a play with Cloudflare Workers again; i-am-a-great.dev is now purely served using a worker (no blob storage). On top of that, it also uses the Workers 'Key Value Pair' API to store a counter that is incremented each time the page is visited.

async function handleRequest(request) {
  let counter = await iamagreatdev.get("counter")
  let increment = parseInt(counter) + 1

  await iamagreatdev.put("counter",increment);

  let html = "...THE HTML FOR THE PAGE!..."
  
  html = html.replace("{{COUNTER}}", increment)
  
  let securityHeaders = {
     //...
     //various headers
     //...
  }

  return new Response(html, {
    status: 200,
    statusText: "OK",
    headers: securityHeaders
  })
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

Thank you to Jamie Street on Unsplash for providing the header image for this post.

James Chorlton

About James Chorlton

I am a software developer from the South-West of England; I mostly work in .NET (c#) creating desktop, web, service, and backend software for the Legal and Health markets.

Comments