https://evanjon.es/

Working with Cloudflare Workers and Zeit's Now 2.0

B roll image of flamethrower.

https://evanjon.es/ started off like most small, first time personal websites, on a shared hosting plan (it was itsevan.net back in those days, or was it itzevan.net?). After I started working a web dev position I quickly learned the web can be a much more excited place. I switched over to a free plan on Heroku to make us of other languages other than PHP.

That was ok – but the tin foil hat came out and I wanted to host all my own personal servers. I bought eight Raspberry Pis, load balanced them, and port forwarded my router. Fun times. My internet was slow.

I then moved all my personal project over to a Digital Ocean Ubuntu server. The RPIs were setup with a Debian based distro (Hyperion) and all web servies were run with Docker Swarm so getting things transfered didn’t take over a few hours.

Deploying wasn’t the worst. I did create my own CI/CD web service. It was very rundementary, though. The DO servers lasted a while. FaaS got more recognition. Then Cloudflare released their Workers. That was cool. Having little code snippets running closer to the user, in over 151 data centers? Right on. Then Zeit released Now 2.0. It looks like “managing” these FaaS “things” was cake. I wanted to try! So here we are. The site is now running Zeit’s static builder while the API requests are completed through Cloudflare workers. Did I mention the frontend was developed with a JavaScript UI library I created? Wigly, 2.68 kB subset of React. This site currently clocks in with a JavaScript bundle at 6.8 kB. Not bad.

I do want more from the developer experience when it comes to Cloudflare workers, though. Zeit excelled here. Running “now” would deploy to a “staging” site while running “now alias evanjon.es” would push that “staging” site to “production.” Couldn’t have been simpler.

Well, what was up with the Cloudflare dev XP? At the moment there’s no real way to run CF workers locally, the best you can do is use them as pseudo Service Workers – but obviously this doesn’t work if you plan to use dependencies from NPM. So, I did what any idiot would, I setup a Webpack build script that would package my workers and copy the contents to my clipboard, then paste them into their worker portal and manually test.

"scripts": {
  "start": "webpack --mode production",
  "copy": "cat ./dist/main.js | xclip -i -selection clipboard"
}

Here is the portal. Thankfully I didn’t do anything complex, just made some requests to Contentful and formatted some markdown. You can take a peek at the code here.

I really want a way to run Cloudflare Workers locally, you can read more about the pain of running workers locally here.