NPM unable to find package.json - VueJS on Docker-Compose - docker

Question

I need to up a vue js app with docker-compose, but when docker trying 'npm install', the logs shows that npm cannot find a file package.json. Notice that i created a vue js project with vue js cli before i trying to up app with docker-compose* I verified if the directory is wrong, but i cannot see anything wrong . I'm running docker commands on vue project root. The docker-compose file is inside another project
My Dockefile:
FROM node:lts-alpine
RUN mkdir /globostore-frontend
WORKDIR /globostore-frontend
ENV PATH /globostore-frontend/node_modules/.bin:$PATH
COPY package.json /globostore-frontend
RUN npm install
RUN npm install -g #vue/cli
CMD ["npm", "run", "serve"]
My docker-compose.yml:
version: "3.8"
services:
db:
image: mysql:5.7
ports:
- '3306:3306'
environment:
MYSQL_DATABASE: 'Globostore'
MYSQL_USER: 'wendel'
MYSQL_PASSWORD: 'wendel12'
MYSQL_ROOT_PASSWORD: 'wendel12'
volumes:
- ./db:/docker-entrypoint-initdb.d/:ro
web:
build: .
command: flask run
volumes:
- .:/app
ports:
- '5000:5000'
depends_on:
- db
links:
- db
environment:
FLASK_ENV: development
bff:
build: ./../globostore-bff/
ports:
- 5001:5001
volumes:
- .:/app
environment:
FLASK_ENV: development
command: flask run
frontend:
build: ./../globostore-frontend/
volumes:
- .:/globostore-frontend
ports:
- 8080:8080
Error:
frontend_1 | npm ERR! code ENOENT
frontend_1 | npm ERR! syscall open
frontend_1 | npm ERR! path /globostore-frontend/package.json
frontend_1 | npm ERR! errno -2
frontend_1 | npm ERR! enoent ENOENT: no such file or directory, open '/globostore-frontend/package.json'
frontend_1 | npm ERR! enoent This is related to npm not being able to find a file.
frontend_1 | npm ERR! enoent
frontend_1 |
frontend_1 | npm ERR! A complete log of this run can be found in:
frontend_1 | npm ERR! /root/.npm/_logs/2021-02-02T17_00_23_137Z-debug.log
This is my project directory structure
I start the application through the docker-compose file at globostore-api directory

Answer 1

Issue
It looks like your error does not come from docker build. It looks like it comes from from this command: npm run serve executed during container start.
During docker build your npm install will work, because the package.json exists - You copy it.
But when you run docker-compose up this file does not exists because you override entire directory with volumes for frontend.
You have docker-compose.yaml next to those files:
.gitignore
app.py
Dockerfile
Readme.md
requirements.txt
There is no package.json file, in that directory, you mount inside the docker-compose.yaml
In docker-compose you have this section:
frontend:
build: ./../globostore-frontend/
volumes:
- .:/globostore-frontend
ports:
- 8080:8080
So you are overwriting volume here: - .:/globostore-frontend, you copied in docker build.
Solution
Remove this line
Replace .:/globostore-frontend to ./globostore-frontend:/globostore-frontend
Do debugging yourself
You can do debugging yourself. Please find tutorial and follow my instructions:
1. Add command to docker-compose.yaml for the frontend service
You need to add this line: command: ["sleep", "10000"]
So your definition will look like:
frontend:
build: ./../globostore-frontend/
volumes:
- .:/globostore-frontend
ports:
- 8080:8080
command: ["sleep", "1000"]
Then try to run docker-compose up and see if your container is working.
2. Find docker container ID
Run docker ps and find container id - this is container hash.
3. Shell into container
Run docker exec -ti CONTAINER_ID sh. Now you are in the container and you can see if the package.json exists in the /globostore-frontend directory.
But the package.json will be missing because you override the /globostore-frontend dir with volume for a frontend in this lines:
volumes:
- .:/globostore-frontend