I’m using React/Vite/Express to build an app that is hosted in a subdirectory. As an example, let’s say it’s hosted at: https://example.com/my/app/

In my Vite config, I’ve set base to ./

export default defineConfig({
    base: './',
    build: {
        outDir: './public/build',
    },
    plugins: [react()],
    css: {
        preprocessorOptions: {
            scss: {
                implementation: sass,
            },
        },
    }
});

When I visit the page with the /, it works just fine, e.g. https://example.com/my/app/

However, if I remove the trailing app using https://example.com/my/app, Vite thinks that the base is the parent directory /my/ and uses that as the root. The React JS and CSS then throw 404s.

Is there a way in Vite to fix this without hard-coding the full path as base, or is this something I need to fix on the server to redirect to the URL with the trailing slash?

I’d rather not hard code the base because it will change depending on environments. If that’s the best-practice approach, though, I’ll go with that solution.

I expected that the application would assume that my/app was a directory. Instead, it seem to be using my/ as the directory. I’ve tried changing base to . and to an empty string, with no luck.