How to serve static assets from a relative path

[einarq]

I'm migrating a CRA app to RR 7 framework mode, and I'm stuck on getting the static files served correctly for the production build.

I'm deploying the app to a server where there are many other apps hosted as well, so the static assets cannot live directly under just "/assets/" on the root.

I have this in my react-router.config.ts:

export default {
  basename: '/home/'
  ssr: true,
} satisfies Config;

And I have this in my vite.config.ts:

export default defineConfig(({isSsrBuild}) => ({
  build: {
    base: './',
    rollupOptions: isSsrBuild ? {
      input: './server/app.ts',
    } : undefined,
    cssMinify: true,
    ssr: false,
  },
  plugins: [reactRouter(), tsconfigPaths()],
}));

I have also tried setting "base" to something more explicit, like:

  build: {
    base: '/home/assets/',

or ideally I would like since that is where it is hosted today:

  build: {
    base: '/home/static/',

But no matter what I do, the landing page markup of the page contains static urls like this:

<link rel="modulepreload" href="/assets/entry.client-D6bXETVa.js"/>

Meaning its trying to load static files directly from the root of the site.

What am I doing wrong?

[einarq]

Note:
App is based on this template:
https://github.com/remix-run/react-router-templates/tree/main/node-custom-server

[digibake]

I'm no expert but does it work to update your vite config file?

export default defineConfig(({isSsrBuild}) => ({
  build: {
    base: './',
    publicDir: "./PUBLIC/PATH/HERE",  // <------ HERE
    rollupOptions: isSsrBuild ? {
      input: './server/app.ts',
    } : undefined,
    cssMinify: true,
    ssr: false,
  },
  plugins: [reactRouter(), tsconfigPaths()],
}));

[einarq]

Thanks, I'll try.

I was looking at publicDir too btw, but that seemed to me to be more about the physical folder of the files.

You mean something like this?

export default defineConfig(({isSsrBuild}) => ({
  build: {
    base: './',
    publicDir: '/home/static/',
    rollupOptions: isSsrBuild ? serverRollupOptions : undefined,
    cssMinify: true,
    ssr: false,
  },
  plugins: [reactRouter(), tsconfigPaths()],
}));

[einarq]

This didnt help btw, no matter what I do I get urls like this in the initial document payload:

[einarq]

Remix had a "publicPath" option, but that doesn't seem to exist in the React Router config?

https://remix.run/docs/en/main/file-conventions/remix-config#publicpath

[einarq]

@brophdawg11

Help please :)

[einarq]

My bad, I had the "base" option under build, seems it needs to be on the top level.

This works:

export default defineConfig(({isSsrBuild}) => ({
  base: "/home/static/",
  build: {
    rollupOptions: isSsrBuild ? serverRollupOptions : undefined,
    cssMinify: true,
    ssr: false,
  },
  plugins: [reactRouter(), tsconfigPaths()],
}));