No assets in the web UI after 3.3.2->4.0.2 upgrade (docker-compose + nginx)

[truenicoco]

Hey all,

Because why not break things that work, I decided to sed -i 's/3\.3\.2/4.0.2/g' docker-compose.yml, which seemed to mostly work, except the web UI is all borked. This is mostly likely because of all the 404s about JS files I can see in firefox inspection tools.

This is my docker-compose.ymlversion: '2.4'

services:

  frontend:
    image: "grocy/frontend:v4.0.2"
    build:
      args:
        GROCY_VERSION: v4.0.2
        PLATFORM: linux/amd64
      context: .
      dockerfile: Containerfile-frontend
    depends_on:
      - backend
    ports:
      - '127.0.0.1:8081:8080'
    read_only: true
    tmpfs:
      - /tmp
    restart: unless-stopped

  backend:
    image: "grocy/backend:v4.0.2"
    build:
      args:
        GROCY_VERSION: v4.0.2
        PLATFORM: linux/amd64
      context: .
      dockerfile: Containerfile-backend
    expose:
      - '9000'
    read_only: true
    tmpfs:
      - /tmp
    volumes:
      - app-db:/var/www/data
    env_file:
      - grocy.env
    restart: unless-stopped

volumes:
  app-db:

and my nginx conf:

server {
    server_name grocy.example.com;

    location / {
        proxy_pass http://localhost:8081;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/dubouch.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/dubouch.example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = grocy.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name grocy.example.com;
    listen 80;
    return 404; # managed by Certbot
}

What am I doing wrong? Thanks!

Looking at the frontend logs I see errors like *815 open() "/var/www/public/packages/datatables.net-select-bs4/js/select.bootstrap4.min.js" failed (2: No such file or directory)

[jayaddison]

Thanks @truenicoco.

Could you list the content of the /var/www/public/ directory in your frontend container?

My guess is that, for some reason, the frontend JavaScript/NPM packages haven't been installed. We may need to re-docker-compose build that, but let's try to figure out what went wrong first.

[truenicoco]

Thanks for the fast reply!

> sudo docker exec -it grocy-docker_frontend_1 sh
/var/www $ ls /var/www/public/
css           index.php     node_modules  uisounds
img           js            robots.txt    viewjs
/var/www $ ls -l /var/www/public/
total 32
drwxr-xr-x    2 nginx    nginx         4096 Aug 21 06:39 css
drwxr-xr-x    2 nginx    nginx         4096 Aug 21 06:39 img
-rw-r--r--    1 nginx    nginx          873 Aug 21 06:39 index.php
drwxr-xr-x    2 nginx    nginx         4096 Aug 21 06:39 js
drwxr-xr-x  111 nginx    nginx         4096 Aug 21 06:39 node_modules
-rw-r--r--    1 nginx    nginx           26 Aug 21 06:39 robots.txt
drwxr-xr-x    2 nginx    nginx         4096 Aug 21 06:39 uisounds
drwxr-xr-x    3 nginx    nginx         4096 Aug 21 06:39 viewjs
/var/www $ ls -l /var/www/public/js
total 68
-rw-r--r--    1 nginx    nginx         4505 Aug 21 06:39 extensions.js
-rw-r--r--    1 nginx    nginx        17099 Aug 21 06:39 grocy.js
-rw-r--r--    1 nginx    nginx          986 Aug 21 06:39 grocy_clock.js
-rw-r--r--    1 nginx    nginx        10161 Aug 21 06:39 grocy_datatables.js
-rw-r--r--    1 nginx    nginx         1583 Aug 21 06:39 grocy_dbchangedhandling.js
-rw-r--r--    1 nginx    nginx         1290 Aug 21 06:39 grocy_menu_layout.js
-rw-r--r--    1 nginx    nginx         4044 Aug 21 06:39 grocy_nightmode.js
-rw-r--r--    1 nginx    nginx          691 Aug 21 06:39 grocy_summernote.js
-rw-r--r--    1 nginx    nginx          467 Aug 21 06:39 grocy_uisound.js
-rw-r--r--    1 nginx    nginx         1634 Aug 21 06:39 grocy_wakelockhandling.js

Let me know if you want me to run some more tests before nuking it all and starting fresh. :)

[jayaddison]

Ok, thanks - yep, this confirms the problem, thanks @truenicoco!

Basically: with the update from Grocy v3.x to v4.x, the location of the static JavaScript files has changed from a node_modules directory to a packages directory.

You can see that change in grocy here (for example, the changes in default.blade.php), and the corresponding change in grocy-docker here (note the yarn install line).

So basically the problem seems likely to be that your Containerfile-frontend file is out-of-date (doesn't have the directory name change). Is your local copy of it from a git clone of this repository?

[truenicoco]

It's all managed by docker-compose. I attempted a new sudo docker-compose pull; sudo docker-compose up --build -d. This is the relevant output for the frontend part:

Building frontend
Sending build context to Docker daemon  766.5kB
Step 1/20 : ARG PLATFORM
Step 2/20 : FROM --platform=${PLATFORM} docker.io/alpine:3.17.2
 ---> b2aa39c304c2
Step 3/20 : LABEL maintainer "Talmai Oliveira <to@talm.ai>, James Addison <jay@jp-hosting.net>"
 ---> Using cache
 ---> 899629419088
Step 4/20 : ARG GROCY_VERSION
 ---> Using cache
 ---> 028c8c67ba03
Step 5/20 : RUN     apk add --no-cache             git             gnupg             wget             yarn
 ---> Using cache
 ---> 437c6d66736e
Step 6/20 : RUN     apk update &&         apk add --no-cache             nginx
 ---> Using cache
 ---> c1c51c07f512
Step 7/20 : RUN     rm -rf /var/www/localhost &&         chown nginx /var/www
 ---> Using cache
 ---> 90fe4c3c39b1
Step 8/20 : COPY static/frontend/nginx.conf /etc/nginx/nginx.conf
 ---> Using cache
 ---> 6935a2558e42
Step 9/20 : COPY static/frontend/common.conf /etc/nginx/common.conf
 ---> Using cache
 ---> f77225ecc3a6
Step 10/20 : COPY static/frontend/conf.d/default.conf /etc/nginx/conf.d/default.conf
 ---> Using cache
 ---> c8d745e50d55
Step 11/20 : USER nginx
 ---> Using cache
 ---> 69d2fd480bfc
Step 12/20 : WORKDIR /var/www
 ---> Using cache
 ---> 1904199c6eb4
Step 13/20 : ENV GROCY_RELEASE_KEY_URI="https://berrnd.de/data/Bernd_Bestel.asc"
 ---> Using cache
 ---> 26b3846e52b5
Step 14/20 : RUN     set -o pipefail &&         export GNUPGHOME=$(mktemp -d) &&         wget ${GROCY_RELEASE_KEY_URI} -O - | gpg --batch --import &&         git clone --branch ${GROCY_VERSION} --config advice.detachedHead=false --depth 1 "https://github.com/grocy/grocy.git" . &&         git verify-commit ${GROCY_VERSION} &&         rm -rf ${GNUPGHOME}
 ---> Using cache
 ---> 3663aa496cb5
Step 15/20 : RUN     yarn install --frozen-lockfile --modules-folder /var/www/public/node_modules --production &&         yarn cache clean
 ---> Using cache
 ---> 403f0b1e3f1f
Step 16/20 : USER root
 ---> Using cache
 ---> c7e91df3bc4a
Step 17/20 : RUN     apk del             git             gnupg             wget             yarn
 ---> Using cache
 ---> 663d9e2f3b33
Step 18/20 : EXPOSE 8080
 ---> Using cache
 ---> fe39f96c6b5e
Step 19/20 : USER nginx
 ---> Using cache
 ---> 0368aab8a1b0
Step 20/20 : CMD ["nginx", "-e", "/proc/self/fd/2", "-g", "daemon off;"]
 ---> Using cache
 ---> db31a9a59625
Successfully built db31a9a59625
Successfully tagged grocy/frontend:v4.0.2

The yarn install step was cached, maybe something went wrong here?

[jayaddison]

Yep, it is indeed something to do with the yarn install step.

Here's what that line should look like for version v4.0.2 : https://github.com/grocy/grocy-docker/blob/0a921f13c57069400c609f3f1b8d015f4f069bca/Containerfile-frontend#L42

[truenicoco]

So I ran docker system prune -a and rebuilt it all but I'm still in the same situation.

The logs for the yarn install step show this:

Step 15/20 : RUN     yarn install --frozen-lockfile --modules-folder /var/www/public/node_modules --production &&         yarn cache clean
 ---> Running in 9fb1cd940b23
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > bootbox@6.0.0" has unmet peer dependency "@popperjs/core@^2.0.0".
warning " > bootstrap@4.6.2" has unmet peer dependency "popper.js@^1.16.1".
warning " > tempusdominus-bootstrap-4@5.39.2" has unmet peer dependency "popper.js@^1.16.1".
warning " > tempusdominus-bootstrap-4@5.39.2" has unmet peer dependency "moment-timezone@^0.5.31".
warning " > tempusdominus-bootstrap-4@5.39.2" has unmet peer dependency "tempusdominus-core@5.19.3".
warning Ignored scripts due to flag.
[4/4] Building fresh packages...
Done in 8.33s.
yarn cache v1.22.19
success Cleared cache.
Done in 0.77s.
Removing intermediate container 9fb1cd940b23
 ---> f7e06f525539
Step 16/20 : USER root
 ---> Running in 91dcc7e9d64b

[jayaddison]

Hm, ok - thanks. I still think that your Containfile-frontend file is out-of-date compared to the version needed for v4.x - can you paste the yarn install command that appears in your copy of the file?

[truenicoco]

Oh OK, I am a donkey.

Since I changed the port in the docker-compose file (because 8080 is used by another service on my server), git pull wouldn't update stuff until I actually committed or reverted my changes, and I somehow missed the message.

Thanks a lot for your help.

[jayaddison]

No problem, these things happen! Glad to help - is everything working OK after those updates?

[truenicoco]

Looks like it but I haven't explored much. I'll open an issue if I notice something. :)