fix(qwik-city): support vite.base in dev mode

packages/qwik-city/runtime/src/utils.unit.ts

@@ -188,7 +188,6 @@ test(`isSameOrigin`, () => {
     );
   });
 });
-
 test('missing clientNavPath', () => {
   const clientNavPath = null;
   const currentLoc = new URL('https://qwik.dev/contact');

packages/qwik/src/core/platform/platform.ts

@@ -65,9 +65,10 @@ export const createPlatform = (): CorePlatform => {
  * @returns Fully qualified URL.
  */
 export const toUrl = (doc: Document, containerEl: QwikElement, url: string | URL): URL => {
-  const baseURI = doc.baseURI;
+  const baseURI = new URL(doc.baseURI);
   const base = new URL(containerEl.getAttribute('q:base') ?? baseURI, baseURI);
-  return new URL(url, base);
+  const pathUrl = (base.pathname + url).replace(/\/+/g, '/');
+  return new URL(pathUrl, base.origin);
 };
 
 let _platform = /*#__PURE__ */ createPlatform();

packages/qwik/src/optimizer/src/plugins/plugin.ts

@@ -100,6 +100,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     },
     inlineStylesUpToBytes: null as any,
     lint: true,
+    base: '',
   };
 
   const init = async () => {
@@ -134,6 +135,13 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
 
     opts.debug = !!updatedOpts.debug;
 
+    opts.base =
+      !updatedOpts?.base || updatedOpts.base === '/'
+        ? ''
+        : updatedOpts.base.endsWith('/')
+          ? updatedOpts.base.slice(0, -1)
+          : updatedOpts.base;
+
     updatedOpts.target === 'test';
     if (
       updatedOpts.target === 'ssr' ||
@@ -957,6 +965,7 @@ export interface QwikPluginOptions {
    * large projects. Defaults to `true`
    */
   lint?: boolean;
+  base?: string;
 }
 
 export interface NormalizedQwikPluginOptions extends Required<QwikPluginOptions> {

packages/qwik/src/optimizer/src/plugins/vite-server.ts

@@ -123,7 +123,7 @@ export async function configureDevServer(
                   location: 'head',
                   attributes: {
                     rel: 'stylesheet',
-                    href: url,
+                    href: `${opts.base}${url}`,
                   },
                 });
               }
@@ -135,6 +135,7 @@ export async function configureDevServer(
             : 'src';
 
           const renderOpts: RenderToStreamOptions = {
+            base: opts.base,
             debug: true,
             locale: serverData.locale,
             stream: res,
@@ -183,7 +184,7 @@ export async function configureDevServer(
                   pathId.endsWith(ext)
                 )
               ) {
-                res.write(`<link rel="stylesheet" href="${v.url}">`);
+                res.write(`<link rel="stylesheet" href="${opts.base}${v.url}">`);
               }
             });
           });
@@ -374,7 +375,7 @@ const DEV_QWIK_INSPECTOR = (opts: NormalizedQwikPluginOptions['devTools'], srcDi
 
 const END_SSR_SCRIPT = (opts: NormalizedQwikPluginOptions, srcDir: string) => `
 <style>${VITE_ERROR_OVERLAY_STYLES}</style>
-<script type="module" src="/@vite/client"></script>
+<script type="module" src="${opts.base}/@vite/client"></script>
 ${errorHost}
 ${perfWarning}
 ${DEV_QWIK_INSPECTOR(opts.devTools, srcDir)}

packages/qwik/src/optimizer/src/plugins/vite.ts

@@ -155,6 +155,7 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
         devTools: qwikViteOpts.devTools,
         sourcemap: !!viteConfig.build?.sourcemap,
         lint: qwikViteOpts.lint,
+        base: viteConfig.base,
       };
       if (!qwikViteOpts.csr) {
         if (target === 'ssr') {

packages/qwik/src/qwikloader.ts

@@ -72,9 +72,11 @@ export const qwikLoader = (doc: Document, hasInitialized?: number) => {
     const attrValue = element[getAttribute](attrName);
     if (attrValue) {
       const container = element.closest('[q\\:container]')!;
-      const base = new URL(container[getAttribute]('q:base')!, doc.baseURI);
+      const baseURI = new URL(doc.baseURI);
+      const base = new URL(container.getAttribute('q:base') ?? baseURI, baseURI);
       for (const qrl of attrValue.split('\n')) {
-        const url = new URL(qrl, base);
+        const pathUrl = (base.pathname + qrl).replace(/\/+/g, '/');
+        const url = new URL(pathUrl, base.origin);
         const symbolName = url.hash[replace](/^#?([^?[|]*).*$/, '$1') || 'default';
         const reqTime = performance.now();
         let handler: any;

packages/qwik/src/testing/platform.ts

@@ -96,8 +96,10 @@ export function setTestPlatform(_setPlatform: Function) {
  * @returns Fully qualified URL.
  */
 export function toUrl(doc: Document, containerEl: Element, url: string | URL): URL {
-  const base = new URL(containerEl?.getAttribute('q:base') ?? doc.baseURI, doc.baseURI);
-  return new URL(url, base);
+  const baseURI = new URL(doc.baseURI);
+  const base = new URL(containerEl.getAttribute('q:base') ?? baseURI, baseURI);
+  const pathUrl = (base.pathname + url).replace(/\/+/g, '/');
+  return new URL(pathUrl, base.origin);
 }
 
 function toPath(url: URL) {

starters/apps/basic/src/root.tsx

@@ -8,6 +8,7 @@ import { RouterHead } from "./components/router-head/router-head";
 
 import "./global.css";
 
+const BASE_URL = import.meta.env.BASE_URL;
 export default component$(() => {
   /**
    * The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -20,7 +21,7 @@ export default component$(() => {
     <QwikCityProvider>
       <head>
         <meta charSet="utf-8" />
-        <link rel="manifest" href="/manifest.json" />
+        <link rel="manifest" href={`${BASE_URL}manifest.json`} />
         <RouterHead />
         <ServiceWorkerRegister />
       </head>

starters/apps/empty/src/root.tsx

@@ -7,7 +7,7 @@ import {
 import { RouterHead } from "./components/router-head/router-head";
 
 import "./global.css";
-
+const BASE_URL = import.meta.env.BASE_URL;
 export default component$(() => {
   /**
    * The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -20,7 +20,7 @@ export default component$(() => {
     <QwikCityProvider>
       <head>
         <meta charSet="utf-8" />
-        <link rel="manifest" href="/manifest.json" />
+        <link rel="manifest" href={`${BASE_URL}manifest.json`} />
         <RouterHead />
       </head>
       <body lang="en">

starters/apps/site-with-visual-cms/src/root.tsx

@@ -8,6 +8,7 @@ import { RouterHead } from "./components/router-head/router-head";
 
 import "./global.css";
 
+const BASE_URL = import.meta.env.BASE_URL;
 export default component$(() => {
   /**
    * The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -20,7 +21,7 @@ export default component$(() => {
     <QwikCityProvider>
       <head>
         <meta charSet="utf-8" />
-        <link rel="manifest" href="/manifest.json" />
+        <link rel="manifest" href={`${BASE_URL}manifest.json`} />
         <RouterHead />
         <ServiceWorkerRegister />
       </head>