Treading the uncharted territory of Cloudflare apps

Disclaimer: This article is not a tutorial on how to build an end-to-end Cloudflare App, but rather my takeaways from the project.

Everything has a first. My first was to build a Cloudflare App - a cookie consent widget. The goal is simple: the user(anyone who owns a Cloudflare DNS) should be able to install a cookie plugin on their website without hassle.

A banner often pops-up at the bottom of most pages, asking you to accept their cookies. You must be familiar with something like this:

Q: Do I need a cookie policy on my website?
A: Yes, you do, Under GDPR it is a legal obligation. A good website always respects users' privacy.

I hope that was a brief but useful introduction to cookies.

I was offered a paid internship to develop a cookie plugin. I had applied for the internship and was glad to know when the subject of the mail read that I was selected as a remote intern. I skimmed through the mail to know my project and more importantly, the technology being used. I was hoping, indeed praying, for it to be Python. Yes, I fell in love with Python and made it a point to develop all personal projects in Python.

This was part of the mail I had received:

Oops! Javascript and Cloudflare. Should I choose to accept it? Will I do good? Always, always, always seize the opportunity. Javascript was not an alien language, I could develop the logic, and then Google/StackOverflow my way through the syntax and debugging.

But what on earth was Cloudflare? Sure, the name was tossed around a lot in recent articles on how their 1.1.1.1 DNS was super-fast. But that was the extent to which I knew Cloudflare. A Cloudflare app? (Long story short, a Cloudflare app is, in its true sense - a plugin that can be installed on websites that use Cloudflare DNS.) I had never even used a Cloudflare App or even its DNS let alone developing a full-blown app.

If I accepted the internship offer, what could possibly go wrong, right? I accepted it :)

Getting Started

To get a feel of how Cloudflare works, I had to use an app someone else had created. To do that, my website needed to be linked to Cloudflare DNS. Food for thought - I needed to own a website for that. With the help of my mentors, I got the following steps done, in order:

1. Register a free .cc domain and point its DNS to Cloudflare
2. Connect a static Netlify website with the above domain
3. Install Collect Chat App in that website

I got a rough idea of how Cloudflare and its app ecosystem worked by doing this.

The next step was to start developing the app. It was no surprise but to RTFM. The official documentation provided an awesome push in the right direction.

Like every inexperienced coder, reading through the docs was not exciting. I opened two tabs - Google and YouTube, in the hope of landing upon a tutorial that would make my job easy. To my dismay, there were scarcely any resources available, but for a video which had little under 500 views and an equal proportion of likes and dislikes. After a few minutes of panic search, changing search engines to DuckDuckGo and Bing, I was devoid of any hope for a good tutorial. My future self would thank me for overcoming my cynicism and choosing to watch that YouTube video with hardly any views. This video would lay the pavestone for my entire project.

I followed along with the short tutorial that built a very basic app, remotely related to what I needed to do, not fully grasping what all of the code meant, but copying the code like a kid who had been handed a box of sour chocolates (they were chocolates nonetheless). The copy-pasted code worked like charm (surprise, surprise!). This was not good enough but a small step in the right direction. I started playing around with the copy-pasted code, adding my own changes and commenting out lines to understand how it all fit in, sometimes completely breaking the app. In two hours, it was up and running, grasping what worked and what did not, and got a sense of direction to proceed in to build the complete app. I do not claim any of this is rocket science but it does feel good to build and make considerable improvements to something that felt completely alien only hours ago :)

The Front-end

Every app needs a front-end. If the UI is not good, no matter how well your app performs, chances are slim that it might sell. If you have built websites, you must be familiar with HTML and CSS. We can pull off the trick with just enough JavaScript(or awesome JavaScript libraries) to have a decent functioning website. The Cloudflare app was similar to this but the catch was that it was difficult to use HTML or CSS directly.
To create a simple div, <div></div> does not work. We have to use JavaScript:
var div = document.createElement("div");

Cloudflare provides some neat abstractions that makes it very easy to accept various forms of input from the user and make live changes to our app - This is well explained in their documentation here.
I built a compact UI that stuck to the bottom of the page until the website visitor accepted the use of cookies. Almost every part of the cookie bar was customizable from the color of the background of the banner to what should be written as the cookie text.
This is the end product with the default options:

Not everybody wants to be tracked. Non-essential cookies, the cookies that are not essential for the smooth functioning of the website (stuff that contains trackers from Google Analytics and more) can be disabled at will. More Settings had this option. I used a CSS modal (Writing CSS in JavaScript) to accomplish this. When the user clicked on More Settings, they had an option to toggle the use of non-essential cookies. I am not an expert in CSS, but w3schools has saved me a lot of times in need. Has reinventing the wheel ever bore fruit?

The front-end was the relatively easy part. I am a front-end developer and have developed front-end websites firsthand. I could say that I got lucky here.

The Harder You Work, the Luckier You Get.

At the least, I knew how to do a proper Google search to get the resources I wanted :D

The Back-end

All good things must come to an end. While I did not want it to, the back-end was not a walk in the park.

The task was simple - block the cookies from a known list of trackers. The execution? Not so much. For starters, I did not know the first thing about blocking any script on a page, let alone blocking only trackers. With whatever little knowledge I had, it was impossible to develop an interceptor to block HTTP requests(aka scripts in this context).

As always, Google was my go-to heaven. There were apps that did exactly this - block cookies from tracking websites but what I needed was a small library that achieved this functionality. All the available interceptors were too heavy (in size and sophisticated features) and would slow the website down. There are many reasons why Google is the best search engine but would you really use Google if the page took more than 5 seconds to load?

Great things come in small packages.

I don't exactly remember how this happened but buried deep inside a StackOverflow answer that did not have any upvotes, lay yett. Its description read "A small webpage library to control the execution of (third party) scripts". I could see the effort the developers had put to build such an awesome open-source project, which was even very well documented. Here I was, researching for 3 days straight, 6 hours a day, about to give up all hope on completing the project, at least on time. Yett, with its funny name and the most compact description, was my Dark Knight - a watchful protector and a silent guardian.

To say that I was elated would be an understatement. I did run into problems that were the compatibility issues of yett with Cloudflare. Whenever I got stuck, I tried other logical approaches to the problem. When that did not work, workarounds (achieving the same result but in a different way) would often do the trick. When both these approaches failed, I did not hold back to open a Github issue. I opened two issues. The yett team helped me solve one and the Cloudflare team helped me solve the other.

Final Thoughts

• Stay focused. It took me almost a month to finish the internship. I made it a point to work at least 3-4 hours daily on the project, except on Sundays. I wouldn't even boot into GNU/Linux on Sundays.

• From knowing some JavaScript and having zero knowledge on Cloudflare, I was able to pull off an app. If I can do it, what is stopping you from seizing opportunities? ;)

• Good mentors can take you a long way. The best is always saved for the last. My mentors from Collect.chat - Shyjal and Karthik were awesome. They guided me whenever I got stuck and motivated me to complete this project. It absolutely would not have been possible without them.

• There are two ways to approach a problem.

  1. Test the water, get your feet wet, read a tutorial on how to swim, and then swim.
  2. Jump into the middle of the ocean with a life jacket and then read the manual on how to swim.

  I have tried both these approaches. It's difficult to pick a side as both have their pros and cons. In this particular project, the latter approach worked very well for me.

Thank you for making it to the end. I would love to hear your thoughts on this. Until then! :)