fix: Improve Docker layer caching on frontend changes

[adamantike]

Avoid any changes in the frontend/ folder to trigger npm install. Instead, split the copies to have separate steps for install and build.

[gantoine]

very nice 💯

[gantoine]

Tried building this on my server and it failed on npm run build. Also tried changing the previous step to npm install and it still failed.

=> ERROR [front-build-stage 6/6] RUN npm run build 14.9s
[front-build-stage 6/6] RUN npm run build:
0.383
0.383 > romm@0.0.1 build
0.383 > npm run typecheck && vite build
0.383
0.550
0.550 > romm@0.0.1 typecheck
0.550 > vue-tsc --noEmit
0.550
14.75 src/App.vue(13,30): error TS7016: Could not find a declaration file for module 'mitt'. '/front/node_modules/mitt/dist/mitt.mjs' implicitly has an 'any' type.
14.75 There are types at '/front/node_modules/mitt/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mitt' library may need to update its package.json or typings.
14.75 src/components/Administration/Users/Dialog/CreateUser.vue(5,30): error TS7016: Could not find a declaration file for module 'mitt'. '/front/node_modules/mitt/dist/mitt.mjs' implicitly has an 'any' type.
14.75 There are types at '/front/node_modules/mitt/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mitt' library may need to update its package.json or typings.
14.75 src/components/Administration/Users/Dialog/DeleteUser.vue(7,30): error TS7016: Could not find a declaration file for module 'mitt'. '/front/node_modules/mitt/dist/mitt.mjs' implicitly has an 'any' type.
14.75 There are types at '/front/node_modules/mitt/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mitt' library may need to update its package.json or typings.
14.75 src/components/Administration/Users/Dialog/DeleteUser.vue(17,38): error TS7006: Parameter 'userToDelete' implicitly has an 'any' type.
14.75 src/components/Administration/Users/Dialog/EditUser.vue(7,30): error TS7016: Could not find a declaration file for module 'mitt'. '/front/node_modules/mitt/dist/mitt.mjs' implicitly has an 'any' type.
14.75 There are types at '/front/node_modules/mitt/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mitt' library may need to update its package.json or typings.
14.75 src/components/Administration/Users/Dialog/EditUser.vue(18,36): error TS7006: Parameter 'userToEdit' implicitly has an 'any' type.
...

[adamantike]

I'm not being able to reproduce the error. This is the command I'm using, to disable cache, and pull latest versions for the referenced images, to avoid any existing state. Also building just the frontend target, to validate faster.

docker build --pull --no-cache -t romm:local-frontend --target front-build-stage . --file ./docker/Dockerfile

[gantoine]

Strange, I run it using the same command and it failed again, with the same error. I'll have a closer look at it later.

[adamantike]

It's possible the .dockerignore is not working as expected, and you have a node_modules folder that gets copied to the container after the npm ci step. I can test that later today, but for now, you can delete that folder and run the build again.

[gantoine]

you have a node_modules folder that gets copied to the container

yeah that was it! removing it i'm now able to build consistently 🎉