Load Static Site without the `baseUrl` or `DJANGO_VITE_STATIC_URL_PREFIX` in the URL

[philiplee15]

I seem to be stuck in a loop of whack a mole game where I set baseUrl == '/' and DJANGO_VITE_STATIC_URL_PREFIX = "static/internal_tools/" because I want the Django endpoint shown in the browser to be relative to "/" and not the STATIC_URL (for example localhost:8000, or example.com/ but it keeps redirecting me to either the {DJANGO_VITE_STATIC_URL_PREFIX }/actual/url (http://localhost:8000/static/internal_tools/internal/customer-success) or unable to load the assets. I want it to just be http://localhost:8000/internal/customer-success.

Any tips on this? I have tried many different iterations of the above configs but have been stuck on this for a while now.

[philiplee15]

Here are configs for reference:

Django

STATIC_URL = '/static/'
# make sure STATIC_ROOT has / on end of it otherwise
# sitemap won't work.
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles/")
# Django Vite
DJANGO_VITE_ASSETS_PATH = os.path.join(BASE_DIR, 'frontend/internal_tools/dist/internal_tools')
DJANGO_VITE_DEV_MODE = False  # We serve dist build so this is always False
DJANGO_VITE_MANIFEST_PATH = os.path.join(STATIC_ROOT, 'internal_tools/manifest.json')
DJANGO_VITE_STATIC_URL_PREFIX = "internal_tools"

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "trellis/static"),
    os.path.join(BASE_DIR, 'judge_dashboard/dist'),
    os.path.join(BASE_DIR, 'frontend/internal_tools/dist'),
]

Vite

// https://vitejs.dev/config/
export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "") };
  return defineConfig({
    plugins: [vue(), vueJsx()],
    base: process.env.NODE_ENV == "production" ? "/" : "http://localhost:3000/",
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    server: {
      proxy: {
        "/api": {
          target:
            process.env.NODE_ENV == "production"
              ? "/"
              : "http://localhost:8000/",
          changeOrigin: true,
          secure: false,
          ws: true,
        },
        "^/favicon*": {
          target:
            process.env.NODE_ENV == "production"
              ? "/"
              : "http://localhost:8000/",
          changeOrigin: true,
          secure: false,
          ws: true,
        },
      },
    },
    build: {
      rollupOptions: {
        input: {
          main: resolve(__dirname, "index.html"),
        },
      },
      outDir: resolve("./dist/internal_tools"),
      manifest: true,
    },
  });
}

[MrBin99]

Hi, I think you should make all your assets under the same path. It's how Django works. And when you will deploy to production you will need to do a lot of configuration for your web server to handle all static files.

[JulianPinzaru]

Same problem for me. Is there any solution to that ?

[serpentcarcass]

Stukcstuck on the same problem, any solutions?