Frontend can't connect to the API

Support
1

Hi,
I’m new to Vikunja, and I’m trying to get it set up on Docker. I’m using BunkerWeb as my reverse proxy, based on Nginx. Here is my docker compose file:

version: '3'

services:
  db:
    image: mariadb:10
    networks:
      - vikunja_network
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    environment:
      MYSQL_ROOT_PASSWORD: supersecret
      MYSQL_USER: vikunja
      MYSQL_PASSWORD: secret
      MYSQL_DATABASE: vikunja
    volumes:
      - ./db:/var/lib/mysql
    restart: unless-stopped
  api:
    image: vikunja/api
    networks:
      - vikunja_network
      - services
    environment:
      VIKUNJA_DATABASE_HOST: db
      VIKUNJA_DATABASE_PASSWORD: secret
      VIKUNJA_DATABASE_TYPE: mysql
      VIKUNJA_DATABASE_USER: vikunja
      VIKUNJA_DATABASE_DATABASE: vikunja
      VIKUNJA_SERVICE_JWTSECRET: mypassword
      VIKUNJA_SERVICE_FRONTENDURL: https://vikunja.mydomain.com/
    volumes: 
      - ./files:/app/vikunja/files
    depends_on:
      - db
    restart: unless-stopped


  frontend:
    image: vikunja/frontend
    restart: unless-stopped
    networks:
      - vikunja_network
      - services
    labels:
          - "bunkerweb.SERVER_NAME=vikunja.mydomain.com"
          - "bunkerweb.ALLOWED_METHODS=GET|POST|HEAD|DELETE|PUT"
          - "bunkerweb.REVERSE_PROXY_URL=/"
          - "bunkerweb.REVERSE_PROXY_HOST=http://vikunja-frontend-1:80"
          - "bunkerweb.REVERSE_PROXY_URL_1=^/(api|dav|[.]well[-]known)"
          - "bunkerweb.REVERSE_PROXY_HOST_1=http://vikunja-api-1:3456"
          - "bunkerweb.MAX_CLIENT_SIZE_1=20M"
          - "bunkerweb.REVERSE_PROXY_WS=yes"
          - "bunkerweb.REVERSE_PROXY_WS_1=yes"

networks:
    vikunja_network:
        name: vikunja
        ipam:
          driver: default
          config:
            - subnet: 172.22.0.0/24
    services:
      name: services
      external: true

Note: BunkerWeb works through labels but is basically doing the same thing as Nginx.

The frontend can correctly be reached by going to vikunja.mydomain.com.

The problem I’m encountering is that I can’t reach the API, wether it is from the hosted frontend or from a desktop app. On the frontend, I have 2 different errors. Sometimes it is:

An error occurred:
TypeError: Cannot read properties of undefined (reading 'replace')

Veuillez vérifier que l'URL de l'API est valide.

Or it can be:

An error occurred:
TypeError: n.split(...)[1] is undefined

Veuillez vérifier que l'URL de l'API est valide.

I don’t see any error in the vikunja logs, neither in the api or the frontend container.

What could cause these errors ? Thanks in advance for any help or idea, don’t hesitate to ask if elements are missing to answer. Have a great day.

2

I don’t know anything about BunkerWeb but maybe the labels for the api proxy should be placed at the config for the api container? The api should be accessible from the outside.

To check if everything works, you should be able to open <your domain>/api/v1/info in a browser.

3

I managed to fix it by messing with the Bunkerweb tags, I shared my config here [DOC] Add configuration template for Vikunja · Issue #322 · bunkerity/bunkerweb · GitHub if anybody needs it