Routing issue on Cloudflare workers for SPA

I initially used the official workers-site template, and the navigation worked when I start from the root URL (it took me to /login, and all other routes after login were working fine), but on page refresh, I used to see an error like below:

could not find login/index.html in your content namespace

JFYI, My routes on wrangler config are set to load the app from /app, yet the build directory is set to the actual build path that includes index.html


After implementation of the SPA on the Workers Site according to the official react template and the official Cloudflare documentation for React, nothing works anymore and I get the same error on all routes, even at the root.


Here is my final Workers Site index.js:

✏️➡️ import { getAssetFromKV, serveSinglePageApp } from '@cloudflare/kv-asset-handler'

/**
 * The DEBUG flag will do two things that help during development:
 * 1. we will skip caching on the edge, which makes it easier to
 *    debug.
 * 2. we will return an error message on exception in your Response rather
 *    than the default 404.html page.
 */
const DEBUG = false

addEventListener('fetch', event => {
    try {
        event.respondWith(handleEvent(event))
    } catch (e) {
        if (DEBUG) {
            return event.respondWith(
                new Response(e.message || e.toString(), {
                    status: 500,
                }),
            )
        }
        event.respondWith(new Response('Internal Error', { status: 500 }))
    }
})

async function handleEvent(event) {
    const url = new URL(event.request.url)
    let options = {}

    ✏️➡️ options.mapRequestToAsset = serveSinglePageApp;

    try {
        if (DEBUG) {
            // customize caching
            options.cacheControl = {
                bypassCache: true,
            };
        }
        const page = await getAssetFromKV(event, options);

        // allow headers to be altered
        const response = new Response(page.body, page);

        response.headers.set("X-XSS-Protection", "1; mode=block");
        response.headers.set("X-Content-Type-Options", "nosniff");
        response.headers.set("X-Frame-Options", "DENY");
        response.headers.set("Referrer-Policy", "unsafe-url");
        response.headers.set("Feature-Policy", "none");

        return response;

    } catch (e) {
        // if an error is thrown try to serve the asset at 404.html
        if (!DEBUG) {
            try {
                let notFoundResponse = await getAssetFromKV(event, {
                    mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req),
                })

                return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 })
            } catch (e) {}
        }

        return new Response(e.message || e.toString(), { status: 500 })
    }
}

Ah never mind, i found the issue… it was a misconfiguration on the build folder path.

@admin please remove this topic