feat(remix-dev/vite, remix-react, remix-server-runtime): support custom basename

.changeset/three-cars-dream.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/express": patch
+---
+
+Vite: Update the express adapter to use `req.originalUrl` when an application `basename` is present

.changeset/vite-deprecate-public-path.md

@@ -0,0 +1,7 @@
+---
+"@remix-run/dev": patch
+---
+
+Vite: Remove the ability to pass `publicPath` as an option to the Remix vite plugin
+  - ⚠️ **This is a breaking change for projects using the unstable Vite plugin with a `publicPath`**
+  - This is already handled in Vite via the [`base`](https://vitejs.dev/guide/build.html#public-base-path) so we now set the Remix `publicPath` from the Vite `base` config

.changeset/vite-rr-basename.md

@@ -0,0 +1,8 @@
+---
+"@remix-run/dev": minor
+"@remix-run/express": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+---
+
+Vite: Add a new `basename` option to the Vite plugin, allowing users to set the internal React Router [`basename`](https://reactrouter.com/en/main/routers/create-browser-router#basename) in order to to serve their applications underneath a subpath

docs/future/vite.md

@@ -51,7 +51,6 @@ The following subset of Remix config options are supported:
 - [appDirectory][app-directory]
 - [future][future]
 - [ignoredRouteFiles][ignored-route-files]
-- [publicPath][public-path]
 - [routes][routes]
 - [serverBuildPath][server-build-path]
 - [serverModuleFormat][server-module-format]
@@ -63,6 +62,10 @@ The Vite plugin also accepts the following additional options:
 The path to the build directory, relative to the project root. Defaults to
 `"build"`.
 
+#### basename
+
+An optional basename for your route paths, passed through to the React Router [`basename`][rr-basename] option. Please note that this is different from your _asset_ paths - you can configure those via the Vite [`base`][vite-base] flag.
+
 #### buildEnd
 
 A function that is called after the full Remix build is complete.
@@ -210,6 +213,7 @@ In order to align the default Remix project structure with the way Vite works, t
 This also means that the following configuration defaults have been changed:
 
 - [publicPath][public-path] defaults to `"/"` rather than `"/build/"`
+  - `publicPath` is also no longer something you configure directly, instead it is set internally from the Vite [`base`][vite-base] config value.
 - [serverBuildPath][server-build-path] has been replaced by `serverBuildFile` which defaults to `"index.js"`. This file will be written into the server directory within your configured `buildDirectory`.
 
 ## Additional features & plugins
@@ -1207,3 +1211,5 @@ We're definitely late to the Vite party, but we're excited to be here now!
 [cloudflare-proxy-cf]: https://github.com/cloudflare/workers-sdk/issues/4875
 [cloudflare-proxy-ctx]: https://github.com/cloudflare/workers-sdk/issues/4876
 [cloudflare-proxy-caches]: https://github.com/cloudflare/workers-sdk/issues/4879
+[rr-basename]: https://reactrouter.com/routers/create-browser-router#basename
+[vite-base]: https://vitejs.dev/config/shared-options.html#base

integration/helpers/vite.ts

@@ -15,6 +15,7 @@ const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
 export const VITE_CONFIG = async (args: {
   port: number;
+  viteOptions?: string;
   pluginOptions?: string;
   vitePlugins?: string;
   viteManifest?: boolean;
@@ -26,6 +27,7 @@ export const VITE_CONFIG = async (args: {
     import { unstable_vitePlugin as remix } from "@remix-run/dev";
 
     export default defineConfig({
+      ...${args.viteOptions ?? "{}"},
       ssr: {
         resolve: {
           externalConditions: ${JSON.stringify(
@@ -136,10 +138,12 @@ export const viteRemixServe = async ({
   cwd,
   port,
   serverBundle,
+  basename,
 }: {
   cwd: string;
   port: number;
   serverBundle?: string;
+  basename?: string;
 }) => {
   let nodeBin = process.argv[0];
   let serveProc = spawn(
@@ -154,26 +158,38 @@ export const viteRemixServe = async ({
       env: { NODE_ENV: "production", PORT: port.toFixed(0) },
     }
   );
-  await waitForServer(serveProc, { port });
+  await waitForServer(serveProc, { port, basename });
   return () => serveProc.kill();
 };
 
 type ServerArgs = {
   cwd: string;
   port: number;
+  env?: Record<string, string>;
+  basename?: string;
 };
 
 const createDev =
   (nodeArgs: string[]) =>
-  async ({ cwd, port }: ServerArgs): Promise<() => unknown> => {
-    let proc = node(nodeArgs, { cwd });
-    await waitForServer(proc, { port });
+  async ({ cwd, port, env, basename }: ServerArgs): Promise<() => unknown> => {
+    let proc = node(nodeArgs, { cwd, env });
+    await waitForServer(proc, { port, basename });
     return () => proc.kill();
   };
 
 export const viteDev = createDev([remixBin, "vite:dev"]);
 export const customDev = createDev(["./server.mjs"]);
 
+// Used for testing errors thrown on build when we don't want to start and
+// wait for the server
+export const viteDevCmd = ({ cwd }: { cwd: string }) => {
+  let nodeBin = process.argv[0];
+  return spawnSync(nodeBin, [remixBin, "vite:dev"], {
+    cwd,
+    env: { ...process.env },
+  });
+};
+
 export const using = async (
   cleanup: () => unknown | Promise<unknown>,
   task: () => unknown | Promise<unknown>
@@ -185,26 +201,32 @@ export const using = async (
   }
 };
 
-function node(args: string[], options: { cwd: string }) {
+function node(
+  args: string[],
+  options: { cwd: string; env?: Record<string, string> }
+) {
   let nodeBin = process.argv[0];
 
   let proc = spawn(nodeBin, args, {
     cwd: options.cwd,
-    env: process.env,
+    env: {
+      ...process.env,
+      ...options.env,
+    },
     stdio: "pipe",
   });
   return proc;
 }
 
 async function waitForServer(
   proc: ChildProcess & { stdout: Readable; stderr: Readable },
-  args: { port: number }
+  args: { port: number; basename?: string }
 ) {
   let devStdout = bufferize(proc.stdout);
   let devStderr = bufferize(proc.stderr);
 
   await waitOn({
-    resources: [`http://localhost:${args.port}/`],
+    resources: [`http://localhost:${args.port}${args.basename ?? "/"}`],
     timeout: 10000,
   }).catch((err) => {
     let stdout = devStdout();