Empty page after installation: Is my frontend properly connected to the backend?

Hi there

I’ve just installed vikunja from binary as explained here: https://vikunja.io/docs/install-backend/
My frontend runs in an apache2 environment. (https://vikunja.io/docs/install-frontend/)

The vikunja site is reachable on port 80. At first, a login form appeared where I could register. Since then, all I can see is an empty screen with a vikunja in the bottom left corner (which is quite cute by the way).
2020-05-05 21_09_38-server073 - VMware Remote Console
Entering the site on port 3456 outputs the following:
{“message”:“Not Found”}
Going to the sub /api/v1 results in this:
{“message”:“missing or malformed jwt”}
As far as I know the ‘JWTSecret’-Option has to be configured. I entered 32 random alpha-numeric characters. Please tell me if I’ve misunderstood something there.

I somehow think the frontend is not properly connected to the backend. Is there a way to check whether it is? Or is there something else I could have missed?

Would appreciate some help.

PS: Vikunja seems to be an awesome project!

The frontend assumes the backend is reachable on the same port as the frontend. The responses you showed from the api seems to be the api itself works though. Take a look at this docs article which explains how to host the frontend while also proxying the api to make both reachable on the same port.

This has been mentioned by a few people so far - I have it on the list to improve. It is just not super simple to find a good solution.

If the jwt token is not configured, a new random one will be generated at startup which means all tokens are invalidated when the api restarts. So while it is not needed to set a jwt token, it is strongly recommended.

PS: Vikunja seems to be an awesome project!

Thanks! Also, thank you for using Vikunja, feedback like this is really valuable for me.

1 Like

Okay so I’ve just pushed an update to the frontend which lets you edit the frontend url in the index.html (just open it with an editor, there are comments explaining it better than I could here). You can put the url of where you’re running the api server, probably something like http://my-server.tld:3456/api/v1. That should be the url where you got the {“message”:“Not Found”} response.

I’ll update the docs tomorrow.

1 Like

Hey Kolaente
Thanks for your quick reaction and effort! :smiley:

I've now updated the frontend with the corresponding update you wrote. I set the window.API_URL option in the index.html file to http://localhost:3456/api/v1. Also tried http://localhost:3456.

Unfortunately, not much changed. Accessing the site on port 80 as described in my first post, outputs a pure white page. This time without any vikunja in the corner.

Pure white page sounds like an issue with js files having the wrong format or such. Can you access the js files when you try to access them directly with their url in the browser? Do you get any errors in the browser console?

Also, if you set the api url to localhost, you will only be able to use vikunja from the same host it is running on since the browser uses this url directly to talk to the api.

I’ve also updated the docs.

1 Like

Oh, this makes sense! Just adjusted that one as I cannot access it from the server itself.

The js files in the subdirectory ‘js’ are accessible and are displayed in the browser as text. But the sw.js in the webroot directory is not.
There are some errors showing up in the page inspector:

( is the IP of the server running vikunja)

This looks like you took the raw uncompiled index.html file from the git repo instead of the compiled package on from the downloads page.
If this guess is correct, it wont work without compiling - you should use the released version (since the feature is relatively new, you’ll need the latest/“master” release).

1 Like

Jep, that’s been it. My fault.
Accessing the page on port 80 now gives me a login prompt.

Thank you soo much for your advise! :grinning:

Glad I could help!

I’ll close this thread since the issue is resolved, feel free to open a new one if you have other problems or questions.