Arena Cloudflare Worker

What's a Worker

A Cloudflare Worker is a piece of JavaScript code that runs every time you access a specific route on a website proxied by Cloudflare. The code is executed every request before they reach Cloudflare's cache. This means Worker responses are no cached (although requests made by the worker to other web services might be cached with the appropriate caching headers).

Arena Cloudflare Worker

The Arena Cloudflare Worker can be used to improve your SEO based on the events that you have using the Arena.im events. To start using this worker first you have to have a Cloudflare account and associate with your domain and an Arena.im account.

There are two ways to create a worker on Cloudflare Workers, the first one is using the Wrangler CLI (recommended), and another one is creating the Worker using the Cloudflare dashboard.

Create Worker using Wrangler CLI (recommended)

Manually create/modifying Worker's code could get complicated, especially since we might want to automate all steps to deploy a Web application.

To automate that use the Wrangler Cloudflare Worker's CLI tool. https://developers.cloudflare.com/workers/tooling/wrangler/

Install Wrangler with npm

You can install wrangler using NPM:

$ npm i @cloudflare/wrangler -g

Configuration

Configure your global Cloudflare user. This is an interactive command that will prompt you for your API token:

$ wrangler config

You can create an API token going to the main Account dashboard and click on "Get your API token".

After that, you can generate a Worker.

Generate a Worker

You can generate a new Worker with the default template running this command:

$ wrangler generate arena-worker

Install Arena Cloudflare Worker

Enter in the arena-worker a then install the Arena Cloudflare Worker:

$ cd arena-worker
$ npm install --save @arena-im/arena-cf-worker

Set your Account ID and type

To publish your arena-worker you need to set your Account ID. You can find your Account ID on the main Account dashboard under API > Account ID.

With your Account ID, you can open the file arena-worker/wrangler.toml and put your id on account_id.

Now you have to change the type from javascript to webpack.

Edit your Worker

Open the file arena-worker/index.jsremove all lines and put the following code snippet:

import ArenaHandleRequest from '@arena-im/arena-cf-worker'

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

Publish

Publish the Arena Worker to Cloudflare.

$ wrangler publish

Add route

Once published we can make the routing to run this worker on your domain, perhaps even on a single route path. For this, we need to go to the main Account dashboard and select the Workers tab.

Add a route with your route, for example https://yourdomain/posts/* and select your recently deployed arena-worker Worker.

Now we can access directly that URL: for example https://yourdomain/posts/hello and check that the SEO is working on this page.

Create Worker using the Cloudflare dashboard

Create a Worker

Then we can create a worker on the worker tab. Click on the Workers tab then on "Manage Workers". On the Workers' panel click on "Create a Worker".

Edit the worker

In the Workers Panel create a new Worker, change the name (I used arena-worker) and remove all code in the Script tab and insert the code snippet below and then click on "Save and Deploy".

var ARENA_CF_WORKER_VERSION="0.0.1";!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(this,function(){const e={};function t(t){if(!e[t])return null;return new Date>e[t].expires?null:e[t].value}const n=(new HTMLRewriter).on("div",new class{element(e){e.hasAttribute("data-event")&&e.hasAttribute("data-publisher")&&t(`${e.getAttribute("data-publisher")}-${e.getAttribute("data-event")}`)&&e.after(t(`${e.getAttribute("data-publisher")}-${e.getAttribute("data-event")}`),{html:!0})}});async function i(i){const r=await fetch(i);try{const n=r.clone(),i=await n.text();await async function(n){const i=function(e){const t=function(e){const t=[];let n=0;for(;n<e.length;){let i=e.indexOf('<div id="arena-live"',n);if(-1===i&&(i=e.indexOf('<div class="arena-liveblog"',n)),-1===i)break;const r=e.indexOf("</div>",i+1),a=e.substring(i,r+6);t.push(a),n=r+7}return t}(e),n=[];return t.forEach(e=>{const t=function(e){let t=e.indexOf("data-publisher=");if(-1===t)return null;const n=e.indexOf('"',t+16);return e.substring(t+16,n)}(e);if(!t)return;const i=function(e){let t=e.indexOf("data-event=");if(-1===t)return null;const n=e.indexOf('"',t+12);return e.substring(t+12,n)}(e);i&&n.push({publisherSlug:t,eventSlug:i})}),n}(n);for await(let n of i){if(t(`${n.publisherSlug}-${n.eventSlug}`))continue;const i=await fetch(`https://cached-api.arena.im/v1/liveblog/${n.publisherSlug}/${n.eventSlug}/ldjson`),u=await i.text();r=`${n.publisherSlug}-${n.eventSlug}`,a=u,e[r]={expires:new Date((new Date).getTime()+864e5),value:a}}var r,a}(i)}catch(e){console.error("Cannot generate SEO schema tags")}return n.transform(r)}return"undefined"!=typeof globalThis&&(globalThis.ArenaHandleRequest=i),i});

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

Add route

Once deployed we can make the routing to run this worker on your domain, perhaps even on a single route path. For this, we need to go to the main Account dashboard and select the Workers tab.

Add a route with your route, for example https://yourdomain/posts/* and select your recently deployed arena-worker Worker.

Now you can access directly that URL: for example https://yourdomain/posts/hello and check that the SEO is working on this page.