Does vite base url must have trailing slash?

[liuxinqiong]

Background

• remix version: 2.9.2
• use vite

I set vite's base to /user, remix plugin's basename set to '/user' too. It work fine in dev mode. I visite localhost:5173/user and localhost:5173/user/ well, but after I build and start, the server can't find assets files, because the url need one slash.

So I change /user to /user/, then I can visite localhost:5173/user/ only, It's not ok for me.

Then I try to set vite's base to /user/, remix plugin's basename set to '/user', the terminal throw one error, the error message is below

When using the Remix `basename` and the Vite `base` config, the `basename` config must begin with `base` for the default Vite dev server.

Does anyone have the same problem?

[itsthekeming]

I had to use a custom server to work around this issue. Without a trailing slash on the base option, the Vite dev server works, but I have to use the custom server instead of remix-serve when running the built app.

However, now I'm running into the same issue with a stock Storybook setup.

import { createRequestHandler } from "@remix-run/express";
import { installGlobals } from "@remix-run/node";
import express from "express";

installGlobals({ nativeFetch: true });

const port = process.env.PORT ?? 3000;

const viteDevServer =
  process.env.NODE_ENV === "production"
    ? undefined
    : await import("vite").then((vite) =>
        vite.createServer({
          server: { middlewareMode: true },
        }),
      );

const app = express();

// handle asset requests
if (viteDevServer) {
  app.use(viteDevServer.middlewares);
} else {
  app.use(
    "/assets",
    express.static("build/client/assets", {
      immutable: true,
      maxAge: "1y",
    }),
  );
}

app.use(express.static("build/client", { maxAge: "1h" }));

// handle SSR requests
app.all(
  "*",
  createRequestHandler({
    build: viteDevServer
      ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build")
      : await import("./build/server/index.js"),
  }),
);

app.listen(port, () => {
  console.info(`App listening on https://localhost:${port}/base`);
});

[Nandan1996]

This I think is issue with preview server only. vite preview server referes vite base config value and configures the server to only accept request beginning with that base. Here is how i managed to fix this which doesn't require you to manage your own server.

export default defineConfig(({ mode, isPreview }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const basePath = env.BASE_PATH || '/user';

  return {
    // Add trailing slash only for dev or production build
    base: isPreview ? basePath : `${basePath}/`,
    plugins: [
      remix({
        ssr: false,
        // Keep basename without trailing slash
        basename: basePath,
      }),
      // ... other plugins
    ],
  };
});

you can fix the above way or you can pass base option directly to vite without trailing slash as well like this

vite preview --base=/user