Workers & Routes & SPAs - assets not resolving

[astanciu]

What versions & operating system are you using?

Node 22, wrangler4.22, viteplugin: 1.7.5

Please provide a link to a minimal reproduction

No response

Describe the Bug

I have a worker, using Vite plugin, and it is bound to route: *.domain.com/auth/*. Note the sub-path, that's the key issue here.

In vite, my base is set to : /auth/

wrangler asset config:

  "assets": {
    "not_found_handling": "single-page-application",
    "run_worker_first": ["/auth/api/*"],
    "html_handling": "drop-trailing-slash"
  },

My dist folder after build:

├── auth_svc
│   ├── assets
│   │   ├── bun-sqlite-dialect-BA34DVYO.js
│   │   ├── index-DS8CXNKO.js
│   │   └── server.edge-CMi7F8Zj.js
│   ├── index.js
│   └── wrangler.json
└── client
    ├── assets
    │   ├── index-C6_7OQDu.js
    │   └── etc....
    ├── images
    │   └── favicon.ico
    ├── index.html
    └── manifest.json

Cloudflare will correctly invoke my worker only when the route matches, ie, a url with /auth/*, however, the app is "mounted" at the root /, which creates a conflict that is tricky to solve.

With the config above, we get:
✅ curl test.domain.com/auth/login - OK - returns index.html page
✅ curl test.domain.com/auth/api - OK, worker gets invoked successfully
❓ the index.html file has the following:
- public urls: <link rel="icon" href="/auth/images/favicon.ico" />
- chunks: <script type="module" crossorigin src="/auth/assets/index-C6_7OQDu.js" />
❌ curl https://test.domain.com/auth/images/favicon.ico - returns index.html ( from public folder)
❌ curl https://test.domain.com/auth/assets/index-C6_7OQDu.js - returns index.html page (bundled assets)

The requests fail because the files are actually not under /auth, but under /. the dist/client folder is mounted to /.

We can proove this by

Attempt 1

.. adding this to the vite config:

  build: {
    assetsDir: 'auth/assets'
}

now, dist builds like this:

./dist
├── auth_svc
│   └── auth
│       └── assets
└── client
    ├── auth
    │   └── assets
    └── images

and these now work:
https://test.domain.com/auth/images/favicon.ico
https://test.domain.com/auth/assets/index-C6_7OQDu.js

but we have a different problem; the index.html page has bad URLs:

• public URLs are OK: <link rel="icon" href="/auth/images/favicon.ico" />
• chunks are not: <script type="module" crossorigin src="/auth/auth/assets/index-C6_7OQDu.js" />

Attempt 2

Another attempt to fix this with Vite is using an experimental config that gives you full control over the URLs generated:

  build: {
    assetsDir: 'auth/assets'
  },
  experimental: {
    renderBuiltUrl(filename, { hostId, hostType, type }) {
      if (type === 'public') {
        return `/auth/${filename}`;
      }
      return `/${filename}`;
    },
  },

This produces:

• ✅ file system ( dist/client/auth )
• ❌ public import URLS:
  <link rel="apple-touch-icon" sizes="180x180" href="/auth/images/apple-touch-icon.png">
• ✅ chunk import URLS

We could fix this by editing the original index.html and hard coding the /auth prefix there, but not clean.

Attempt 3

Looking deeper into the plugin code, at how it builds the output paths:
https://github.com/cloudflare/workers-sdk/blob/main/packages/vite-plugin-cloudflare/src/utils.ts#L10-L20
We can see that maybe we can set the outDir for the environment:

  environments: {
    client: {
     build: {
        outDir: 'dist/client/auth/'
     }
    }
  },

This gives us:

• ✅ file system ( dist/client/auth )
• ✅ public imports (they start with /auth), ex: <link rel="icon" href="/auth/images/favicon.ico" />
• ✅ chunk imports (start with /auth/assets) ex: <script type="module" crossorigin src="/auth/assets/index-C6_7OQDu.js">
  but..
• ❌ wrong assets.directory in the generated wrangler config: "directory": "../client/auth".

The wrangler assets.directory should've remained ../client to make everything work.

TLDR

There is no clean way to align the following:

• Vite base setting
• Vite build folder structure
• Wrangler assets.directory

IMO, the correct thing to do would be to have the Vite plugin respect the base config, and append that to the build output, but keep the assets.directory as client

Please provide any relevant error logs

No response

[cloudkite]

I had the same issue #9567, as a workaround you can set the outDir like you did in attempt 3 and add the following as a plugin in your vite.config to overwrite the assets directory

{
  name: "ssr-wrangler-assets-dir",
  apply: "build",
  applyToEnvironment(environment) {
    return environment.name === "ssr";
  },
  async generateBundle(_opts, bundle) {
    let asset = bundle["wrangler.json"];
    let wrangler = JSON.parse(asset.source) as { assets?: {} };
    if (wrangler.assets) {
      wrangler.assets = { ...wrangler.assets, directory: "../client" };
      asset.source = JSON.stringify(wrangler);
    }
  },
},

[jamesopstad]

Thanks for providing the workaround @cloudkite. I'm actually going to keep this open and reopen #9567 as I feel we should provide a solution for this. We're not yet sure what this should look like as it's possible to have multiple routes defined that would require different base options. Open to suggestions.

[cloudkite]

Thanks for providing the workaround @cloudkite. I'm actually going to keep this open and reopen #9567 as I feel we should provide a solution for this. We're not yet sure what this should look like as it's possible to have multiple routes defined that would require different base options. Open to suggestions.

Naive suggestion would be to have a base option in assets which is then added to vite config via the plugin:

// in wrangler.json
"assets": { "base": "/subpath" }

Maybe the vite plugin could validate that this matches one of the routes in wrangler.json.

For my usecase I would be fine if this limited serving assets to one route. But its probably too limiting for general usage.

[hawkinsw]

I know that "Me too"s are annoying and unhelpful, but I wanted to let you know that this issue is exactly what I am up against and really appreciate you finding a solution. I am a huge Cloudflare fan and am really thankful for whatever solution you find!

[hawkinsw]

For anyone stumbling on this between now and when the awesome Cloudflare developers have a fix, I wanted to post my complete solution based on the excellent advice from @cloudkite and @astanciu. Bear in mind that my vocabulary might be off ... I am more of a graybeard than a front-end developer ... this stuff is all new and cool to me!

I have an app written in React that is using Vite as a bundler and I want to run it on Cloudflare workers. I want to host it in a path (/tracker/) and have that path reachable (using a route) at https://app.primair.delivery/tracker/.

Here is the contents of the Vite configuration:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from "node:path";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
  baseDir: "tracker",
  build: {
    outDir: "dist/tracker",
    assetsDir: "tracker/assets",
  },
  plugins: [react(), cloudflare(), {
    name: "ssr-wrangler-assets-dir",
    apply: "build",
    applyToEnvironment(environment) {
      // Always apply this plugin ... more to investigate here, but 
      // it works for now.
      return true;
    },
    async generateBundle(_opts, bundle) {
      let asset = bundle["wrangler.json"];
      let wrangler = JSON.parse(asset.source) as { assets?: {} };
      if (wrangler.assets) {
        wrangler.assets = { ...wrangler.assets, directory: "./" };
        asset.source = JSON.stringify(wrangler);
      }
    },
  }],
  resolve: {
    alias: {
      "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
    },
  },
});

And here is the associated wrangler.jsonc file:

{
  "name": "primair-tracker",
  "compatibility_date": "2025-08-13",
  "assets": {
    "not_found_handling": "single-page-application"
  }
}

Again, thank you to @cloudkite, @astanciu and @jamesopstad and I hope that these notes help someone like they helped me!

[sorodrigo]

Just to add to the importance of this issue.

I'm trying to deploy https://github.com/upbeat-works/edgecms under a subpath like: my-domain.com/edge-cms:

"routes": [
		{
			"pattern": "my-domain.com/edge-cms",
			"zone_name": "my-domain.com"
		},
 ]

and I'm able to get the site running but all assets are 404 because they're trying to be loaded from the origin: my-domain.com/assets instead of my-domain/edge-cms/assets.

What @cloudkite and @hawkinsw shared works!

EDIT: if you're using react-router v7 you need to update the manifest path. https://reactrouter.com/explanation/lazy-route-discovery#configuration

[humphd]

Not sure if what you're describing is what I've been fighting, but the only thing that worked for me was explicitly pointing the assets at the built dist/client dir:

  "assets": {
    "directory": "./dist/client",
    "not_found_handling": "single-page-application",
  },

Without that, everything was 404.