Static first websites with Cloudflare Workers

Rate this content
Bookmark

Static websites give you all sorts of great benefits. You don’t have to worry about security or scalability. They are simple to cache, cheap to host and a breeze to maintain! But sometimes I miss all the fun things you can do with just a little bit of state! Combining the Cloudflare Pages platform with Durable Objects and the HTMLRewriter API, you can have your cake and eat it too! We’ll replicate a full WordPress experience with comments, top posts, like buttons and a page counter. All on Cloudflare’s free static site hosting platform.


You can check the slides for Jonathan's talk here.

Jonathan Kuperman
Jonathan Kuperman
30 min
17 Feb, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk covers the historical landscape of web development, the rise of static site generators, the serverless revolution, edge computing, and using Cloudflare services to enhance static websites. It explores the challenges of early web development, the shift to static sites and client-side rendering, and the advantages of server-side and client-side rendering. It also discusses Cloudflare services like Cloudflare workers, KV, durable objects, and HTML rewriter for building fast and minimal hosting solutions. The Talk highlights the use of DurableObjects for analytics and integration, dynamic content on static sites, JAMstack, and the advantages of using Cloudflare Workers for automatic deployment, multiple language support, and combining static pages with JavaScript functions. It introduces the concept of edge computing and the difference between Cloudflare Pages and Workers. It also touches on error handling and the use of HTML rewriter, Cloudflare KVstore, and DurableObjects for managing state and storing dynamic data.

1. Introduction and Topics Covered

Short description:

In this part, John Cooperman introduces himself as a developer advocate at Cloudflare and discusses the topics that will be covered in the talk, including the historical landscape of web development, the rise of static site generators, the serverless revolution, edge computing, and using Cloudflare services to enhance static websites.

Hey, my name is John Cooperman. I'm here today to talk about static first websites. So first, just a little bit about me. My name is John Cooperman. I'm a developer advocate at Cloudflare. I mostly work in the emerging technologies org. So I work on our server-less platform workers as well as our storage, some of our state, our command line utility, things like that. And if you want to find me online, I am jcoop, J-K-U-P on all the social platforms like Twitter and GitHub and so on.

So what we're going to be covering today, starting a little bit of a historical look into like early 2000s Web Dev, a little landscape of what things were like back then. Talking about the rise of static site generators, so like Jekyll and Gatsby and all of these great tools. And then also talking about a little bit of the serverless revolution. So when serverless platform started coming out and how they changed things for both small and large companies. Then we'll get into a little bit about what edge computing is and why it's so important. And in the end, we're going to kind of together use Cloudflare services to decorate static websites with any dynamic content you want. Hence the name of these like static first websites that are also a little bit dynamic.

2. Early Days of Web Development

Short description:

Back in the early days of web development, developers had to run their own application servers and manage their own servers. This involved choosing hardware, software, and dependencies, as well as scaling and load balancing. While dynamic websites like Rails and WordPress offer a lot of functionality, they require regular updates and maintenance to stay up to date.

So back when I first learned web development, this was like kind of a landscape. So there was a lot of like Ruby on Rails, PHP, people doing WordPress. And then almost all of these would also send down a copy of jQuery as well as maybe a library like Backbone.js for interactivity. But the big takeaway is that everybody was running their own application servers. We hadn't gotten into any of these like smart hosting. There was no AWS anything like that. We were just kind of like picking a language, picking a framework, and then doing it ourselves.

And so one of the things that this meant was that when you needed to get your own app running, you needed to get your own server. Whether it was like a full machine or a VPS, you had to allocate resources for your app to run. So this was like a pretty archaic process back in the day where you had to call or contact a web host. You had to go with them and pick out hardware like how much memory you need, how much CPU you want to have. You had to pick out software like what operating system should run on the server, what version of that operating system. Then you had to get your dependencies installed if you needed node or PHP or Ruby. And then if it was a popular application, it meant you had to scale it yourself. So you had to get multiple servers. You had to find a way to load balance between them. If your database was getting too overloaded, you would have to shard it out onto multiple database servers, you had to figure out caching yourself. Basically, if you had a popular application, you had to become an ops person as well.

So the thing that I really liked about this day and age was that all of these things, these dynamic websites, whether it's Rails or WordPress, they're really dynamic and they're really fun. They have these giant plug in ecosystems, all these tools. You can do all this great stuff with just the click of a button or a simple install script. So when I think about WordPress sites, I think of a lot of fun things like they'll list out your most popular posts. You can add a contact form. You can add a like button. You can have comments, a good discussion going underneath your blog post. Stuff like that is very, very easy with these dynamics sites. But there's a little bit of a downside too, which is that these dynamic sites have a lot of power. They're often interacting with your database directly or doing some file system access on your server. And so updating and staying up to date becomes really crucial. And so whether it's staying up to date with WordPress or your WordPress themes or plugins, or even the operating system on your server itself, there's always a lot of work to be done.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
You can check the slides for James' talk here.
Nuxt on the Edge
Vue.js London 2023Vue.js London 2023
30 min
Nuxt on the Edge
Learn how to build a Vue application deployed to the edge to bring a blazing fast experience to your end users.
ESM Loaders: Enhancing Module Loading in Node.js
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring.
While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.
Out of the Box Node.js Diagnostics
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
In the early years of Node.js, diagnostics and debugging were considerable pain points. Modern versions of Node have improved considerably in these areas. Features like async stack traces, heap snapshots, and CPU profiling no longer require third party modules or modifications to application source code. This talk explores the various diagnostic features that have recently been built into Node.
You can check the slides for Colin's talk here. 
Living on the Edge
React Advanced Conference 2021React Advanced Conference 2021
36 min
Living on the Edge
React 18 introduces new APIs for rendering applications asynchronously on the server, enabling a simpler model for architecting and shipping user interfaces. When deployed on edge networking platforms like Cloudflare Workers, we can get dramatic performance and user experience improvements in our applications. In this talk, Sunil will demo and walk through this new model of writing React applications, with some insight into the implications for data fetching, styling, and overall direction of the React ecosystem.

Workshops on related topic

Node.js Masterclass
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Top Content
Workshop
Matteo Collina
Matteo Collina
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
Building a Hyper Fast Web Server with Deno
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Matt Landers
Will Johnston
2 authors
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
GraphQL - From Zero to Hero in 3 hours
React Summit 2022React Summit 2022
164 min
GraphQL - From Zero to Hero in 3 hours
Workshop
Pawel Sawicki
Pawel Sawicki
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
Mastering Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.