Get in touch
Engineering

Get Dynamic Content at Static Speeds with Cloudflare Workers

Finding middle-ground between full-featured server and static client.

Postlight Labs is our internal workshop where we play, experiment with tools and services, and build new apps. In this new Postlight Labs project, Senior Engineer Shawn Kelly tried his hand at building an app using Cloudflare Workers, and then published a starter kit for any engineer who wants to do the same.

Sometimes static files don’t cut it, but deploying a server and database can be too much if your app just needs a few features—stuff like rendering a page with dynamic data, manipulating headers, or handling authentication. I started this project with a theory: Cloudflare Workers might cover that middle ground between a full-featured server and a static client.

Proving the Theory

To understand new technology I need to build something with it. SecretMsg is a demo app I built to give me a chance to poke around the Cloudflare platform. More specifically, I wanted to see if Workers could be used to deliver an app without an origin server.

From a user perspective, SecretMsg lets you write a message, encrypt it in the browser with a passphrase, and set an amount of time that message will expire in. It gives you a link you can share with the recipient of the message. Give it a try at https://secretmsg.app.

SecretMsg.app

Behind the scenes, the browser encrypts the message, then sends it to the Worker which saves it in a Workers KV store. To view the message, the recipient visits the associated link. The worker fetches the message from the store, renders the page, and sends the response. The recipient enters the passphrase to decrypt the message in the browser. You can explore SecretMsg’s source code here.

Overall, this particular stack is useful for apps with a high read-to-write ratio. Especially with Workers KV, the more data is accessed, the more performance improves, which gives you dynamic content at static file speeds.

Meet The Cloudflare Worker App Kit

Since this is a promising new technology that could be a great fit for any large JavaScript project, I wanted to minimize setup and remove most of the learning curve for other engineers to get started. From SecretMsg, I abstracted out The Cloudflare Worker App Kit, a handy set of tools for creating, developing, testing, and deploying a Cloudflare Worker app. No configuration, just build it and ship it.

Get it for free on GitHub:

postlight/cloudflare-worker-app-kit

☁✨ A handy set of tools for creating a Cloudflare Worker app. – postlight/cloudflare-worker-app-kit

With this kit, you run a single npm command and you’ve got all the pieces you need to start working on a Cloudflare Worker app, including:

  • Project structure, including source files, so you can see how everything fits together.
  • Development tools all set up — local dev server, TypeScript, webpack, Prettier, ESLint, and Jest.
  • Build and deploy scripts. Provide the necessary environment variables and run the deploy command to ship your app to Cloudflare’s 150+ locations around the world.

To get started, run the create command and start building:

npx @postlight/cloudflare-worker-app-kit create <AppName>

When To Use It

If you’re thinking about building a server-side rendered app, but don’t want to spin up another Node.js server: with a Cloudflare Worker app, you don’t have to. By deploying to workers, you get the simplicity and performance of a static app while keeping the control and flexibility of a server. At its core the business case here is pretty simple — it’s fast and cheap. Hard to beat that.

Give the Cloudflare Worker App Kit a try, and let us know what you build with it.

Shawn Kelly is a senior engineer at Postlight. Get in touch: [email protected].

Story published on Mar 25, 2019.