fix: respect basePath setting (#5)

* docs: use BASE_URL env

* fix: support basePath setting of Cite

* docs: update links

Author: uhyo

packages/docs/src/App.tsx

@@ -1,4 +1,4 @@
-import { Router } from "@funstack/router";
+import { Outlet, Router } from "@funstack/router";
 import { route, type RouteDefinition } from "@funstack/router/server";
 import { defer } from "@funstack/static/server";
 import { Layout } from "./components/Layout/Layout";
@@ -10,28 +10,34 @@ import { Home } from "./pages/Home";
 
 const routes: RouteDefinition[] = [
   route({
-    path: "/",
-    component: (
-      <Layout variant="home">
-        <Home />
-      </Layout>
-    ),
-  }),
-  route({
-    path: "/getting-started",
-    component: <Layout>{defer(GettingStarted)}</Layout>,
-  }),
-  route({
-    path: "/api/funstack-static",
-    component: <Layout>{defer(FunstackStaticApi)}</Layout>,
-  }),
-  route({
-    path: "/api/defer",
-    component: <Layout>{defer(DeferApi)}</Layout>,
-  }),
-  route({
-    path: "/concepts/rsc",
-    component: <Layout>{defer(RSCConcept)}</Layout>,
+    path: import.meta.env.BASE_URL.replace(/\/$/, ""),
+    component: <Outlet />,
+    children: [
+      route({
+        path: "/",
+        component: (
+          <Layout variant="home">
+            <Home />
+          </Layout>
+        ),
+      }),
+      route({
+        path: "/getting-started",
+        component: <Layout>{defer(GettingStarted)}</Layout>,
+      }),
+      route({
+        path: "/api/funstack-static",
+        component: <Layout>{defer(FunstackStaticApi)}</Layout>,
+      }),
+      route({
+        path: "/api/defer",
+        component: <Layout>{defer(DeferApi)}</Layout>,
+      }),
+      route({
+        path: "/concepts/rsc",
+        component: <Layout>{defer(RSCConcept)}</Layout>,
+      }),
+    ],
   }),
 ];
 

packages/docs/src/components/Header/Header.tsx

@@ -4,23 +4,32 @@ export const Header: React.FC = () => {
   return (
     <header className={styles.header}>
       <div className={styles.container}>
-        <a href="/" className={styles.logo}>
+        <a href={import.meta.env.BASE_URL} className={styles.logo}>
           <span className={styles.logoIcon}>F</span>
           <span className={styles.logoText}>FUNSTACK Static</span>
         </a>
 
         <nav className={styles.nav}>
-          <a href="/getting-started" className={styles.navLink}>
+          <a
+            href={`${import.meta.env.BASE_URL}getting-started`}
+            className={styles.navLink}
+          >
             Docs
           </a>
-          <a href="/api/funstack-static" className={styles.navLink}>
+          <a
+            href={`${import.meta.env.BASE_URL}api/funstack-static`}
+            className={styles.navLink}
+          >
             API
           </a>
-          <a href="/concepts/rsc" className={styles.navLink}>
+          <a
+            href={`${import.meta.env.BASE_URL}concepts/rsc`}
+            className={styles.navLink}
+          >
             Concepts
           </a>
           <a
-            href="https://github.com/user/funstack-static"
+            href="https://github.com/uhyo/funstack-static"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.githubLink}

packages/docs/src/pages/Home.tsx

@@ -27,7 +27,10 @@ export const Home: React.FC = () => {
             with full SPA interactivity.
           </p>
           <div className={styles.buttons}>
-            <a href="/getting-started" className={styles.primaryButton}>
+            <a
+              href={`${import.meta.env.BASE_URL}getting-started`}
+              className={styles.primaryButton}
+            >
               Get Started
               <svg
                 width="20"
@@ -211,7 +214,10 @@ export const Home: React.FC = () => {
           Build your next SPA with the performance benefits of React Server
           Components.
         </p>
-        <a href="/getting-started" className={styles.ctaButton}>
+        <a
+          href={`${import.meta.env.BASE_URL}getting-started`}
+          className={styles.ctaButton}
+        >
           Read the Documentation
           <svg
             width="20"

packages/docs/vite.config.ts

@@ -28,4 +28,5 @@ export default defineConfig({
     },
     react({ include: /\.(jsx|js|mdx|md|tsx|ts)$/ }),
   ],
+  base: "/funstack-static/",
 });

packages/static/src/client/entry.tsx

@@ -9,6 +9,7 @@ import { GlobalErrorBoundary } from "./error-boundary";
 import type { RscPayload } from "../rsc/entry";
 import { devMainRscPath } from "../rsc/request";
 import { appClientManifestVar, type AppClientManifest } from "./globals";
+import { withBasePath } from "../util/basePath";
 
 async function devMain() {
   let setPayload: (v: RscPayload) => void;
@@ -27,7 +28,9 @@ async function devMain() {
 
   // re-fetch RSC and trigger re-rendering
   async function fetchRscPayload() {
-    const payload = await createFromFetch<RscPayload>(fetch(devMainRscPath));
+    const payload = await createFromFetch<RscPayload>(
+      fetch(withBasePath(devMainRscPath)),
+    );
     setPayload(payload);
   }
   // hydration

packages/static/src/rsc-client/clientWrapper.tsx

@@ -6,6 +6,7 @@ import {
 import { getModulePathFor } from "../rsc/rscModule";
 import { createContext, use } from "react";
 import type { LoadedDeferEntry, DeferRegistry } from "../rsc/defer";
+import { withBasePath } from "../util/basePath";
 
 export const RegistryContext = createContext<DeferRegistry | undefined>(
   undefined,
@@ -25,7 +26,7 @@ export const ClientWrapper: React.FC<ClientWrapperProps> = ({ moduleID }) => {
     }
     return getRSCStreamFromRegistry(entry);
   }
-  const stream = getClientRSCStream(modulePath);
+  const stream = getClientRSCStream(withBasePath(modulePath));
   return use(stream);
 };
 

packages/static/src/rsc/entry.tsx

@@ -4,6 +4,7 @@ import { devMainRscPath } from "./request";
 import { generateAppMarker } from "./marker";
 import { deferRegistry } from "./defer";
 import { extractIDFromModulePath } from "./rscModule";
+import { stripBasePath } from "../util/basePath";
 
 export type RscPayload = {
   root: React.ReactNode;
@@ -79,7 +80,8 @@ export function isServeRSCError(error: unknown): error is ServeRSCError {
  */
 export async function serveRSC(request: Request): Promise<Response> {
   const url = new URL(request.url);
-  if (url.pathname === devMainRscPath) {
+  const pathname = stripBasePath(url.pathname);
+  if (pathname === devMainRscPath) {
     // root RSC stream is requested
     const rootRscStream = await devMainRSCStream();
     return new Response(rootRscStream, {
@@ -90,9 +92,9 @@ export async function serveRSC(request: Request): Promise<Response> {
     });
   }
 
-  const moduleId = extractIDFromModulePath(url.pathname);
+  const moduleId = extractIDFromModulePath(pathname);
   if (!moduleId) {
-    throw new ServeRSCError(`Invalid RSC module path: ${url.pathname}`, 404);
+    throw new ServeRSCError(`Invalid RSC module path: ${pathname}`, 404);
   }
 
   const entry = deferRegistry.load(moduleId);

packages/static/src/ssr/entry.tsx

@@ -8,6 +8,7 @@ import { rscPayloadPath } from "../build/rscPath";
 import { preload } from "react-dom";
 import type { DeferRegistry } from "../rsc/defer";
 import { RegistryContext } from "#rsc-client";
+import { withBasePath } from "../util/basePath";
 
 export async function renderHTML(
   rscStream: ReadableStream<Uint8Array>,
@@ -26,7 +27,7 @@ export async function renderHTML(
     // makes `preinit`/`preload` work properly.
     payload ??= createFromReadableStream<RscPayload>(rscStream1);
     if (options.build) {
-      preload(rscPayloadPath, {
+      preload(withBasePath(rscPayloadPath), {
         crossOrigin: "anonymous",
         as: "fetch",
       });
@@ -38,7 +39,7 @@ export async function renderHTML(
     );
   }
 
-  const builtRscUrl = rscPayloadPath;
+  const builtRscUrl = withBasePath(rscPayloadPath);
   let bootstrapScriptContent: string = "";
   if (options.build) {
     bootstrapScriptContent += `globalThis.${appClientManifestVar}={marker:"${options.appEntryMarker}",stream:"${builtRscUrl}"};\n`;

packages/static/src/util/basePath.ts

@@ -0,0 +1,26 @@
+/**
+ * Strips the base path from a pathname if present.
+ * Used on server-side to normalize incoming request paths.
+ */
+export function stripBasePath(pathname: string): string {
+  const base = import.meta.env.BASE_URL;
+  if (base === "/") return pathname;
+  // Handle base with or without trailing slash
+  const normalizedBase = base.endsWith("/") ? base.slice(0, -1) : base;
+  if (pathname.startsWith(normalizedBase)) {
+    const stripped = pathname.slice(normalizedBase.length);
+    return stripped.startsWith("/") ? stripped : "/" + stripped;
+  }
+  return pathname;
+}
+
+/**
+ * Prepends the base path to a path.
+ * Used on client-side when making fetch requests.
+ */
+export function withBasePath(path: string): string {
+  const base = import.meta.env.BASE_URL;
+  if (base === "/") return path;
+  const normalizedBase = base.endsWith("/") ? base.slice(0, -1) : base;
+  return normalizedBase + path;
+}