Relative path to apps directory not working #155
Description
Hi,
we would like to use django-vite in one of our projects, but currently we have problems to get the npm run dev work. npm rund build works fine.
Our example project can be found here: https://github.com/BonaFideIT/DVTestProject
The project structure looks like this:
root
├── apps
│ └── foo
│ ├── migrations
│ ├── templates
│ │ └── foo
│ │ ├── frontend
│ │ │ └── src
│ │ │ ├── app.css
│ │ │ ├── App.svelte
│ │ │ ├── assets
│ │ │ │ └── svelte.svg
│ │ │ ├── lib
│ │ │ │ └── Counter.svelte
│ │ │ ├── main.ts
│ │ │ └── vite-env.d.ts
│ │ └── index.html
│ ├── urls.py
│ └── views.py
├── dvtestproject
│ ├── manage.py
│ ├── settings
│ │ └── local.py
│ └── urls.py
├── frontend
│ ├── dist
│ ├── package.json
│ ├── package-lock.json
│ ├── public
│ ├── svelte.config.js
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ └── vite.config.ts
├── pyproject.toml
└── uv.lock
When running npm run dev we get the following output:
VITE v6.2.2 ready in 439 ms
➜ Local: http://localhost:5173/static/
➜ Network: use --host to expose
➜ press h + enter to show help
vite:resolve 1.14ms /@vite/client -> /xxx/DVTestProject/frontend/node_modules/vite/dist/client/client.mjs +0ms
vite:time 0.81ms /apps/foo/templates/foo/frontend/src/main.ts +0ms
vite:load 3.57ms [fs] /@vite/client +0ms
vite:resolve 0.19ms @vite/env -> /xxx/DVTestProject/frontend/node_modules/vite/dist/client/env.mjs +10ms
vite:import-analysis 3.98ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +0ms
vite:transform 7.06ms /@vite/client +0ms
vite:time 23.63ms /@vite/client +17ms
vite:load 10.37ms [fs] /node_modules/vite/dist/client/env.mjs +18ms
vite:import-analysis 0.05ms [no imports] node_modules/vite/dist/client/env.mjs +10ms
vite:transform 0.46ms /node_modules/vite/dist/client/env.mjs +10ms
vite:cache [memory] /node_modules/vite/dist/client/env.mjs +0ms
vite:time 0.91ms /node_modules/vite/dist/client/env.mjs +7msthe generated source looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="[/vite.svg](http://127.0.0.1:8000/vite.svg)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte + TS</title>
<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/apps/foo/templates/foo/frontend/src/main.ts"></script>
</head>
<body>
<input type="hidden" name="csrfmiddlewaretoken" value="xxx">
<div id="app"></div>
</body>
</html>but the template contains this tag:
{% vite_asset '../apps/foo/templates/foo/frontend/src/main.ts' %}As a result our page does not load correctly and the vite dev server returns a 404 status code.
So the problem seems to be the ../ which is removed by the template tag but probably it will be removed by the browser anyway. So our question is now, can we get django-vite working with this project structure? Does someone had the same problem and found a solution?