Home | Writings >> Friday afternoon @CloudflareDev vibes
September 27, 2024
Cloudflare recently announced static assets for workers.
You can now deploy static files with a worker, instead of shipping worker code in your Cloudflare Pages project.
This makes it easier to build things like multi-user chat with websockets using durable objects which are not deployable via Cloudflare Pages.
Here are the steps to deploy a static site from scratch. You can follow along or find the code in github.
Less patient users can run pnpm create cloudflare --experimental
and choose a static asset template as described in the docs.
These instructions assume that you already have node and pnpm.
mkdir minimal-static-site
cd minimal-static-site
pnpm install wrangler
You can choose your own worker name and content directory for assets.
#:schema node_modules/wrangler/config-schema.json
name = "minimal-static-site"
compatibility_date = "2024-09-25"
assets = { directory = "./content" }
The worker will serve all files in the assets directory on routes starting at the worker root.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #255;
}
h1 {
color: orange;
font-size: 20vw;
padding: 0.5ch;
}
</style>
</head>
<body>
<h1>Helloπ Workers</h1>
</body>
</html>
$ pnpm wrangler deploy
β
οΈ wrangler 3.78.10
--------------------
π Building list of assets...
π Starting asset upload...
π Found 1 new or modified file to upload. Proceeding with upload...
+ /index.html
Uploaded 1 of 1 assets
β¨ Success! Uploaded 1 file (1.68 sec)
Total Upload: 0.34 KiB / gzip: 0.24 KiB
Uploaded minimal-static-site (9.81 sec)
Deployed minimal-static-site triggers (5.77 sec)
https://minimal-static-site.jldec.workers.dev
Current Version ID: d0ecd041-b9a3-4e89-b168-baa394567839
The result is live at minimal-static-site.jldec.workers.dev
For more thoughts on where this is going, see Read-write Static Assets bindings for Cloudflare Workers.