feat(remix-dev/vite, remix-react, remix-server-runtime): support cust…

…om basename (#8145)

Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Co-authored-by: Matt Brophy <matt@brophy.org>

.changeset/three-cars-dream.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/express": patch
+---
+
+Use `req.originalUrl` instead of `req.url` so that Remix sees the full URL
+- Remix relies on the knowing the full URL to ensure that server and client code can function together, and does not support URL rewriting prior to the Remix handler

.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) config 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]
 - [serverModuleFormat][server-module-format]
 
@@ -62,6 +61,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.
@@ -73,8 +76,7 @@ to `false`.
 
 #### presets
 
-An array of [presets] to ease integration with
-other tools and hosting providers.
+An array of [presets] to ease integration with other tools and hosting providers.
 
 #### serverBuildFile
 
@@ -260,6 +262,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
@@ -1261,6 +1264,8 @@ 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
 [how-fix-cjs-esm]: https://www.youtube.com/watch?v=jmNuEEtwkD4
 [presets]: ./presets
 [vite-5-1-0-beta]: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#510-beta0-2024-01-15

integration/helpers/vite.ts

@@ -122,10 +122,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(
@@ -140,26 +142,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>
@@ -171,26 +185,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();