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

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

Add your directory project structure and how/where you launch the docker build — Max
– Max, Commented Feb 2, 2021 at 18:11
I can't see the package.json on globostore-api directory. On Dockerfile you have COPY package.json /globostore-frontend — Max
– Max, Commented Feb 2, 2021 at 18:31

Daniel Hornik · Accepted Answer · 2021-02-02 20:59:31Z

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

edited Feb 2, 2021 at 20:59

answered Feb 2, 2021 at 18:39

Daniel Hornik

2,5792 gold badges20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joselito Over a year ago

sorry, but i didnt understand so well your explanation. Is it wrong i ask 'npm install' on Dockerfile at globostore-frontend? the package.json file is at globostore-frontend, and i said on dockerfile: 'copy this package.json here into this directory 'globostore-frontend that i just created and run npm install ', and in docker-compose file, i mapped the directory where the dockerfile is into the globostore-frontend directory at the container, or am i wrong?

Daniel Hornik Over a year ago

I have added more explaination, try to follow my debugging instruction, please

Collectives™ on Stack Overflow

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

1 Answer 1

Issue

Solution

Do debugging yourself

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Do debugging yourself

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related