[🐞] `basePathname` is not working with Qwik City (0.2.1 & 0.3.0) dev server

[jessezhang91]

Which component is affected?

Qwik City (routing)

Describe the bug

I have a basePathname defined in the qwikCity options in vite.config.ts. I expect visiting the dev server with the base pathname will load my app but I just get a 404 page instead.

The built express server seems to still function properly.

Reproduction

https://stackblitz.com/edit/qwik-starter-wphjat?file=vite.config.ts

Steps to reproduce

1. Add a basePathname: 'foo' option to the qwikCity middleware in vite.config.ts.
2. Start the vite dev server
3. Try to go to http://localhost:5173/foo/. You should get a 404

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.16 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Safari: 16.2
  npmPackages:
    @builder.io/qwik: 0.18.1 => 0.18.1 
    @builder.io/qwik-city: 0.2.1 => 0.2.1 
    undici: ^5.18.0 => 5.20.0 
    vite: 4.1.1 => 4.1.1

Additional Information

I tried this fix (by manually editing the node modules):

diff --git a/packages/qwik-city/buildtime/vite/dev-server.ts b/packages/qwik-city/buildtime/vite/dev-server.ts
index d8ed56c4..13e7ec59 100644
--- a/packages/qwik-city/buildtime/vite/dev-server.ts
+++ b/packages/qwik-city/buildtime/vite/dev-server.ts
@@ -30,8 +30,9 @@ import { formatError } from './format-error';

 export function ssrDevMiddleware(ctx: BuildContext, server: ViteDevServer) {
   const matchRouteRequest = (pathname: string) => {
+    const fullPathname = ctx.opts.basePathname + pathname.slice(1);
     for (const route of ctx.routes) {
-      const match = route.pattern.exec(pathname);
+      const match = route.pattern.exec(fullPathname);
       if (match) {
         return {
           route,
@@ -40,10 +41,10 @@ export function ssrDevMiddleware(ctx: BuildContext, server: ViteDevServer) {
       }
     }

-    if (ctx.opts.trailingSlash && !pathname.endsWith('/')) {
-      const pathnameWithSlash = pathname + '/';
+    if (ctx.opts.trailingSlash && !fullPathname.endsWith('/')) {
+      const fullPathnameWithSlash = fullPathname + '/';
       for (const route of ctx.routes) {
-        const match = route.pattern.exec(pathnameWithSlash);
+        const match = route.pattern.exec(fullPathnameWithSlash);
         if (match) {
           return {
             route,

and from what I can tell the dev server is good now. Unfortunately devcontainer isn't working properly on M1 macs (I believe?) so I can't get an actual build from the qwik repo. I'm happy to put up a PR but I can't easily test it right now.

This was working properly back with qwik-city beta versions.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-wphjat (Open reproduction)

[jessezhang91]

Just noticed qwik-city 0.3.0 was released, tested with that in StackBlitz as well