How to host V7 Framework SPA behind a reverse proxy

[George-Madeley]

Does anyone know how to host a v7 framework SPA behind a reverse proxy (I.e., nginx)?

I know you should set the base attribute on the Vite config to "./" to make all asset imports relative instead of absolute. Running this behind a reverse proxy allows me to successfully fetch any non-route components; components that are not pages or layouts. It fails to fetch the route components because it for some reason the app duplicates the asset directory in the path (I.e., instead of fetching the route component from "/assets/home_[hash].js", the imports tries to import the component "/assets/assets/home_[hash].js". This path does not exist and therefore fails.).

In my basic C++ HTTP server, I just added a piece of code that replaces all instances of "/assets/assets" with "/assets". This has fixed the issue but it seems to he a stupid way to solve it. However, this has shown the head of another issue regarding client-side routing in the reverse proxy. Let's say I host the website behind the reverse proxy at localhost:8080/my_site/, if I have an /about route in my app, when I navigate to that route, instead of going to localhost:8080/my_site/about, it instead navigates to localhost:8080/about (as if the app was not run behind a reverse proxy). This is an issue with navigation within the app as I am using a purely CSR SPA; no SSR.

To resolve this navigation issue, do I need to set the basename to "./" in the react router config? I tried to do this but I got the following build error:

ErrorResponseImpl {
 status: 404,
 statusText: 'Not Found',
 internal: false,
 data: 'Refusing to prerender the `` path because it does not start with the basename `./`'
}
✗ Build failed in 1.23s
[react-router] SPA Mode: Received a 404 status code from `entry.server.tsx` while prerendering your `index.html` file.
Not Found
   at handleSpaMode (/node_modules/@react-router/dev/dist/vite.js:4281:13)
   at Object.handler (/node_modules/@react-router/dev/dist/vite.js:3679:13)
   at async Promise.all (index 0)
   at PluginDriver.hookParallel (file:///node_modules/rollup/dist/es/shared/node-entry.js:22458:9)
   at file:///node_modules/rollup/dist/es/shared/node-entry.js:23542:13
   at catchUnfinishedHookActions (file:///node_modules/rollup/dist/es/shared/node-entry.js:22902:16)
   at buildEnvironment (file:///node_modules/vite/dist/node/chunks/config.js:33543:64)
   at Object.build (file:///node_modules/vite/dist/node/chunks/config.js:33900:19)
   at buildEnvironment (/node_modules/@react-router/dev/dist/cli/index.js:2025:5)
   at async Promise.all (index 0) {
 code: 'PLUGIN_ERROR',
 plugin: 'react-router',
 hook: 'writeBundle'
}

This seems to be because React Router will force...

the dev server to behave like the deployed pre-rendered site would.

This error originates from the derive() function.

I have tried to build by setting prerender attribute to false and basename to "/" in the react-router.config.ts but when I open the website behind the reverse proxy, any fetch request to my HTTP server is still absolute. (I have reserved the /api/* route for my C++ HTTP server so I can make requests to that backend instead of loaders/actions within the react router app. This is simply done by doing fetch("/api/somePATH"); within my apps code. This is still absolute to localhost:8080 and not relative to localhost:8080/my_site/.) Getting the favicon also has the same issue. Looking the console logs, I get errors for those two issues but I also get another error coming form the entry.client.tsx (I have not revealed this file let alone modified it)

TypeError: Cannot read properties of null (reading 'useContext')
    at Ha.W.useContext (chunk-JZWAC4HX-DUJYhASH.js:1:7785)
    at Sr (chunk-JZWAC4HX-DUJYhASH.js:2:21383)
    at Ti (chunk-JZWAC4HX-DUJYhASH.js:4:13161)
    at chunk-JZWAC4HX-DUJYhASH.js:4:13253
    at Gf (entry.client-CqBigqCN.js:8:47856)
    at ac (entry.client-CqBigqCN.js:8:70530)
    at _m (entry.client-CqBigqCN.js:8:80854)
    at uv (entry.client-CqBigqCN.js:8:116380)
    at j1 (entry.client-CqBigqCN.js:8:115462)
    at Dc (entry.client-CqBigqCN.js:8:115300)

Has anyone got a React Router CSR app (specifically v7 Framework SPA) running successfully behind a reverse proxy?

Build config

// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { resolve } from "path";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  base: "./",
  plugins: [reactRouter(), tsconfigPaths()],
  ssr: {
    noExternal: ["@toolpad/core", "@mui/x-data-grid"],
  },
  resolve: {
    alias: {
      "~": resolve(__dirname, "./app"),
    },
  },
  server: {
    proxy: {
      "/api": "http://localhost:80",
    },
  },
});

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
  basename: "/",
  prerender: false,
  future: {
    v8_middleware: true,
  },
} satisfies Config;

// nginx-my_site.conf
server {
    listen 8080;

    location /my_site/ {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://my_site_local:80/;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}