Vikunja - Unable to run it in subpath -docker compose method

Hi Team ,

I have tried to run vikunja in subpath mydevhost:3456/vikunja but I am facing the below error while curling

“We’re sorry but Vikunja doesn’t work properly without JavaScript enabled . Please enable it to continue”

Steps I followed:-

  1. Cloned the Vikunja repo
  2. Changed the branch to release v0.24.4 .
  3. Followed instructions from Running Vikunja in a subdirectory and changed the default build to include the below in the Dockerfile
VIKUNJA_FRONTEND_BASE=/vikunja/ pnpm run build

  1. Built image using the dockerfile.
  2. Made use of the docker compose file in Vikunja documentation and modified below values
    a.Changed public service url to mydevhost:3456/vikunja
    b. Change the image to point to the one i created in #4 .
    6.Did a docker compose up and when tried to access http://mydevhost:3456/vikunja , hit the error

“We’re sorry but Vikunja doesn’t work properly without JavaScript enabled . Please enable it to continue”

No response on either of my browsers as well.

Can anyone pls help on this.

Thanks

Btw , the docker compose file which I followed is this ==> Full docker example

Can you check with the browser dev tools if the assets are loaded properly?

Thanks for response @kolaente .
The console spits this error when trying to connect to mydevhost:3456/vikunja/

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

When checked under assets , it has loaded up only the index.css file with the same error as that of “Vikunja requires Javascript enabled” .

Same error when I tried to load mydevhost:3456/vikunja/api/v1/info
but the same request gives an output when we omit the subpath though ie.
mydevhost:3456/api/v1/info.

Do I need to copy assets /artifacts to different directories or will the build script itself take care of the same ?

Thanks

That should be taken care of by the build script.

Can you check where the assets are located after the build?

tree -a
.
|-- .dockerenv
|-- app
|   `-- vikunja
|       |-- files
|       `-- vikunja
|-- dev
|   |-- console
|   |-- pts
|   `-- shm
|-- etc
|   |-- hostname
|   |-- hosts
|   |-- mtab -> /proc/mounts
|   |-- resolv.conf
|   `-- ssl
|       `-- certs
|           `-- ca-certificates.crt
|-- proc
`-- sys

This is the output of the entirety of the files from the vikunja running container.

The binary contains the Frontend files, so they won’t show up there. Can you do the same in the build step, directly after the build?

Sure. This is the output directly after pnpm build step at the root of the build directory.

 find -type d -name "assets"
./dist/assets
./node_modules/.pnpm/@histoire+app@0.17.17_vite@5.4.8_@types+node@20.16.10_sass@1.79.4_terser@5.31.6_/node_modules/@histoire/app/dist/app/assets
./node_modules/.pnpm/@histoire+app@0.17.17_vite@5.4.8_@types+node@20.16.10_sass@1.79.4_terser@5.31.6_/node_modules/@histoire/app/dist/bundled/assets
./node_modules/.pnpm/@histoire+app@0.17.17_vite@5.4.8_@types+node@20.16.10_sass@1.79.4_terser@5.31.6_/node_modules/@histoire/app/src/app/assets
./node_modules/.pnpm/@histoire+controls@0.17.17_vite@5.4.8_@types+node@20.16.10_sass@1.79.4_terser@5.31.6_/node_modules/@histoire/controls/histoire-dist/assets
./node_modules/.pnpm/@surma+rollup-plugin-off-main-thread@2.2.3/node_modules/@surma/rollup-plugin-off-main-thread/tests/fixtures/assets-in-worker/build/assets
./node_modules/.pnpm/chroma-js@1.4.1/node_modules/chroma-js/docs/assets
./node_modules/.pnpm/shiki-es@0.2.0/node_modules/shiki-es/dist/assets
./src/assets

Thanks

Any help on this would be appreciated.
This will help everyone running off of Docker container to run Vikunja from a subpath.

Thanks

What’s the html response you get when accessing Vikunja?

You mean the web page when I access with the subpath ? Nothing. I am getting a blank page ,
with below error in console , as I had mentioned above in my earlier replies as well.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Thanks

I mean if you access the page in the browser and do a right click > view source. Or do a curl request to the page.

When I do a curl to http://mydevhost:3456/vikunja , I get the below response

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Vikunja</title>
        <meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
        <meta name="theme-color" content="#1973ff"/>

        <link rel="icon" href="/vikunja/favicon.ico">
        <link rel="apple-touch-icon" href="/vikunja/images/icons/apple-touch-icon-180x180.png"/>
        <!--__vite-plugin-inject-preload__-->
  <script type="module" crossorigin src="/vikunja/assets/index-DezNfXcS.js"></script>
  <link rel="stylesheet" crossorigin href="/vikunja/assets/index-BLOnFNWs.css">
  <script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
  <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
<link rel="manifest" href="/vikunja/manifest.webmanifest"></head>
<body>
<noscript>
        <strong>We're sorry but Vikunja doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script>
        window.SENTRY_ENABLED = false
        window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
        window.ALLOW_ICON_CHANGES = true
        window.CUSTOM_LOGO_URL = ''
</script>
<script>
        //
        // This variable points the frontend to the api.
        // It has to be the full url, including the last /api/v1 part and port.
        // You can change this if your api is not reachable on the same port as the frontend.
        window.API_URL = 'http://mydevhost:3456/vikunja/api/v1'
</script>
  <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
  <script nomodule crossorigin id="vite-legacy-polyfill" src="/vikunja/assets/polyfills-legacy-CVKB9eFZ.js"></script>
  <script nomodule crossorigin id="vite-legacy-entry" data-src="/vikunja/assets/index-legacy-CLMPW4qe.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
</body>
</html>

And are the files referenced in the script tags accessible from the browser?

No , curl request to the polyfills and index-legacy give the same error as above , it is 200 OK ,but with the

"We;re sorry but Vikunja doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

But , without the subpath, meaning http://mydevhost:3456/assets/polyfills-legacy-CVKB9eFZ.js gives an output/dumps the js text on the screen.

Does this mean there is a issue with the location of the assets post compilation or build process ?

That sounds like you need to copy the assets to a vikunja/ subfolder before building the api container.

Ok thanks ,but i was under the impression that the build script should take care of the same i.e creating the folder and transferring the assets since I had used VIKUNJA_FRONTEND_BASE=/vikunja/. while building.

So, do you suggest that post the pnpm build command , I create a vikunja subdirectory and move the assets under the same either.

can you please help on the path the vikunja subdirectory needs to be created .

Also can you please confirm if copying the below directories alone would suffice ?

./dist/assets
./src/assets

Thanks
Pradeep

The buildscript only add the prefix to the output path where the files are requested.

Only dist/assets. You’ll need to move that to dist/vikunja/assets.

Thanks @kolaente .Let me try this and keep you posted on whether this resolved the issue.