How can I deploy a react vite application with a public folder to a subfolder on my domain?

Question

I am trying to deploy a react application with vite as the bundler to a subfolder on my domain (i.e. https://example.com/my-app).

My vite.config.ts is as follows:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  root: "./",
  build: {
    outDir: "dist",
  },
  base: "/my-app/",
  publicDir: "public"
});

I'm deploying this as a static site, so I'm basically copying the dist folder from running vite build to my digital ocean droplet.

When I navigate to https://example.com/my-app, I am able to receive the initial javascript and css files. However, when the javascript runs, I get a 404 error on a file that is in the public folder. The GET request indicates that it is no longer looking in the subfolder, but looking for the asset directly in the root domain.

So, GET request for javascript looks like this:

https://example.com/my-app/assets/index-95119c9d.js

GET request based on the served javascript for the static asset (my-asset)looks like this:

https://example.com/my-asset

How do I indicate in my vite.config.ts that references to the public folder assets should also be searched for at the subfolder specified as base in my config file.

Answer 1

I ended up needing to prefix all of the files I was loading from the "public" folder with the subfolder name (e.g. /my-app/my-asset from the example above). Doing this in combination with the above vite.config.ts worked, though I feel this is a brittle solution.