DATEV Nine-Nine | A Fun and Simple CI/CD Setup with Cloudflare Workers and GitHub Actions Part 1

By: Matthias Alt, Stephan Bierwirth & Gerrit Riesch

Intro

Today we are going to show you a really cool Edge Computing technology named Cloudflare Workers. We like Cloudflare Workers for their simplicity, reduced energy consumption and latency (compared to most alternatives) and therefore real potential for eco-friendliness — an area where Cloudflare has been invested in for years. After some short background information on the topic, we are going to deploy an Angular App to Cloudflare Workers step by step. Have fun!

Edge Computing and Cloudflare Workers

Serverless and Edge Computing are popular and well established by now, so you probably already know what they are. In very short, Edge Computing tries to move everything closer to the end user and therefore evokes a lot of reduction in latency, traffic, bandwidth, geographic distance, and energy consumption. Cloudflare Workers enables this kind of reduction. It may sound surprising but under the hood, Cloudflare Workers uses the V8 engine used by Chromium and Node.js. The Worker functions run on instances that run on Cloudflare’s Edge Network, a global network, with direct connections to reach 95% of the world’s population within approximately 50ms. Each of these instances runs in one of 275 cities (in >100 countries). Each instance runs thousands of isolates: A lightweight context with a safe environment for your code to be executed in. Isolates are fast and have no cold startup delay. Isolates start around a hundred times faster than a Node process on a container or virtual machine and consume a lot less memory on startup. So, in that regard Cloudflare Workers are a great tool for developers with eco-friendliness on their mind.

Setup

The first step is to sign up to get a Cloudflare account before continuing. Don’t worry, it’s fast, easy and it’s free for 100.000(!) requests per day. After signing up, confirm your email address, log in, go to workers, and select the free plan. Finally chose a subdomain name that suits you and we’re good to go.

Now we need to install Wrangler, the Cloudflare Workers CLI. Wrangler will help us set up our project and to publish it. Make sure you have npm installed, open any command line interface, and then just enter:

npm install -g wrangler

After that you have to login to your account and allow Wrangler to have access. Just enter the following and you will be redirected.

wrangler login

Now we want to show you how to deploy a project to Workers. We are going to use Angular in this example (it might not be the standard use case for Cloudflare Workers, but it works, is easy and gives you lots of insights. Of course, you can deploy your backends as well to Cloudflare Workers). You can use an existing Angular Project or create a new one with the Angular CLI and ng new. Make sure your Project is building without errors by running:

ng build

Deployment

We have to add some files to get our deployment ready. We are going to skip the complex or unnecessary parts to keep it simple for your first Worker. First enter

wrangler init

to get started. You will be asked a couple of questions and you can answer them all depending on the project you are in or just with no. The important part is that we now have a wrangler.toml file. And that is where we need to add and/or adjust the following content:

In our case we need to add the kv-asset-handler package to get Workers to function with our angular app. Just install the package to your dev dependencies:

npm i -D @cloudflare/kv-asset-handler

Now we need to add the cf-workers.index.ts file — mentioned in the wrangler.toml — with the following content:

That’s it! We have our project configured, and we can now publish the Worker. It will be published to a *.workers.dev subdomain by default. (You can change this in your Workers Dashboard)

wrangler publish

And we’re done! You can now preview your Worker at <YOUR_WORKERS_NAME>.<YOUR_SUBDOMAIN>.workers.dev.

Final thoughts

In this article we showed you what Cloudflare Workers are, why we like them and how to deploy an Angular App with them. As mentioned, you can give it a try for free on the official Cloudflare Workers website. In our next article we are going to automate the wrangler publish command in our GitHub repository with GitHub Actions. So, stay tuned. ;)

We hope you enjoyed our blog, and we would love to see you next time!

Your three DATEV Nine-Nine detectives,

Matthias Alt (LinkedIn)

Stephan Bierwirth (LinkedIn)

Gerrit Riesch (LinkedIn)