"No bindings found" error when running "wrangler dev" despite assets defined in toml
I have a static site of just html files and it's fine to serve them directly by just putting all the files there in my github repo and pushing them to Cloudflare Pages. But now I want to manage serving the html files because I want to use htmx to reuse the parts of the page that don't change. So I'm trying to set up a simple worker that just serves the html fragments from the request if it has an "HX-Request" header, and if not, get the requested html content and put it inside my template "shell.html" before serving it. I've been trying to get this to work for a humiliatingly long amount of time so any advice is appreciated. My pages assets are in ./public, and the worker assets are in ./dist. Here's my wrangler.toml file:
name = "broken-blog"
main = "index.js"
compatibility_date = "2025-01-01"
[assets]
directory = "./dist/"
binding = "ASSETS"
run_worker_first = true
And the index.js file:
export default {
async fetch(request, env) {
const url = new URL(request.url);
const isHTMX = request.headers.get('HX-Request') === 'true';
const content = await env.ASSETS.fetch(url);
console.log({content, request})
// Bypass processing for HTMX requests
if (isHTMX) return content;
console.log({content, request})
const shell = await env.ASSETS.fetch(new URL('/shell.html', url.origin));
return new Response(
(await shell.text()).replace('<!-- CONTENT -->', await content.text()),
{ headers: { 'Content-Type': 'text/html' } }
);
},
};
name = "broken-blog"
main = "index.js"
compatibility_date = "2025-01-01"
[assets]
directory = "./dist/"
binding = "ASSETS"
run_worker_first = true
And the index.js file:
export default {
async fetch(request, env) {
const url = new URL(request.url);
const isHTMX = request.headers.get('HX-Request') === 'true';
const content = await env.ASSETS.fetch(url);
console.log({content, request})
// Bypass processing for HTMX requests
if (isHTMX) return content;
console.log({content, request})
const shell = await env.ASSETS.fetch(new URL('/shell.html', url.origin));
return new Response(
(await shell.text()).replace('<!-- CONTENT -->', await content.text()),
{ headers: { 'Content-Type': 'text/html' } }
);
},
};
Welcome to the official Cloudflare Developers server. Here you can ask for help and stay updated with the latest news
86,801Members
Resources
Similar Threads
Was this page helpful?
