Not able to figure out why docker compose up is not running my React JS App

Question

I want to run a react app in a docker container with the help of a docker-compose and docker file. It is showing package.json file is missing but I do have that file in my local directory which I am trying to map with the docker container.

I have successfully built the image by running docker-compose build command. But while I am trying to run docker-compose up command it is showing below error

PS E:\Project\MyProfile\my-profile> docker-compose up   
Starting myprofile_web_1 ... done
Attaching to myprofile_web_1
web_1  | npm ERR! code ENOENT
web_1  | npm ERR! syscall open
web_1  | npm ERR! path /app/package.json
web_1  | npm ERR! errno -2
web_1  | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'
web_1  | npm ERR! enoent This is related to npm not being able to find a file.
web_1  | npm ERR! enoent
web_1  |
web_1  | npm ERR! A complete log of this run can be found in:
web_1  | npm ERR!     /root/.npm/_logs/2020-06-03T16_54_28_610Z-debug.log
myprofile_web_1 exited with code 254 

My machine is Windows 10 and let me know if you all need any further information.

My Docker File:

FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD [ "npm","run","start" ]

Docker Compose File:

version: '3'
services: 
    web:
        build:
            context: .
            dockerfile: Dockerfile.dev
        ports: 
            - 3000:3000
        volumes: 
            - /app/node_modules
            - .:/app

UPDATE 1:

As Peter suggested I look into 'app' directory in the Docker container I can see package.json file there.

Update 2

File Permissions log

PS E:\Project\MyProfile\my-profile> docker run website ls -lah
total 724K
drwxr-xr-x    1 root     root        4.0K Jun  6 16:03 .
drwxr-xr-x    1 root     root        4.0K Jun  6 16:07 ..
-rwxr-xr-x    1 root     root          17 Jun  5 16:55 .dockerignore
drwxr-xr-x    7 root     root        4.0K Apr 20 16:02 .git
-rwxr-xr-x    1 root     root         310 Oct 26  1985 .gitignore
drwxr-xr-x    2 root     root        4.0K Apr 18 10:53 .vscode
-rwxr-xr-x    1 root     root         190 Jun  4 18:08 Dockerfile.dev
-rwxr-xr-x    1 root     root       52.6K Sep 21  2019 MyProfile.png
-rwxr-xr-x    1 root     root        2.8K Oct 26  1985 README.md
drwxr-xr-x    3 root     root        4.0K Apr 16 17:34 build
drwxr-xr-x    3 root     root        4.0K Oct  2  2019 config
-rwxr-xr-x    1 root     root         274 Jun  4 17:54 docker-compose.yml
-rwxr-xr-x    1 root     root         610 Apr 24 05:11 eg.js
drwxr-xr-x 1056 root     root       36.0K Jun  6 15:59 node_modules
-rw-r--r--    1 root     root      562.9K Jun  6 15:59 package-lock.json
-rwxr-xr-x    1 root     root        3.8K Apr  5 08:34 package.json
drwxr-xr-x    2 root     root        4.0K Apr 20 05:03 public
drwxr-xr-x    2 root     root        4.0K Oct  2  2019 scripts
drwxr-xr-x    6 root     root        4.0K Apr 15 16:44 src

Solution:

I was able to resolve this issue by moving my Project to C:/User/{User_Name} folder. Explaination for the same can be found here (Docker volumes and package.json not found)

If you do not want to move folders just like me you can do that as well checkout this (How to mount local volumes in docker machine)

Answer 1

Steps to do:

1. Do this (it will remove your docker volumes) in case already cached:

 docker-compose down -v --rmi "all"

And then "docker-compose up" again.

2. Another problem you might have is permissions of the file.

What user own the file "package.json" ?

Also make sure you run "docker-compose up" in the same folder you have this folder or point to this folder correctly in COPY statement ("COPY package*.json ./")

Use:

docker exec  <name of container> ls -lah

Where <name of container> is your name or container ID. you can see this if you write down the command "docker ps" it will show you a list like this bellow with this titles and below the containers active, if not empty

CONTAINER ID | IMAGE | COMMAND | CREATED | STATUS | PORTS | NAMES

to see that your package.json is not there or permission not correct for the file. Remember "docker run" create a container from a specific image. "docker exec" execute a command using a already live container.

Insted of printed you "ls" folder "ls -lah" will be more helpful.

3. Your docker-compose is first excluding node_modules then mount your root root directory (where node_modules is) try it like this below instead (switch the order):

     volumes: 
        - .:/app
        - /app/node_modules

Answer 2

I was able to resolve this issue by moving my Project to C:/User/{User_Name} folder. The explanation for the same can be found here (Docker volumes and package.json not found).

If you do not want to move folders just like me you can do that as well checkout this (How to mount local volumes in docker machine)

Answer 3

Change your copy line like this

COPY package*.json .

Answer 4

Hello and welcome to Stack Overflow

Your line COPY package*.json ./ is copying your package.json to a file named ./

If you were to run the container with a custom entrypoint, as below you would see a file named accordingly.

You can do the below to get an interactive shell, that allows you to inspect the filesystem:

docker run -it --entrypoint /bin/sh your-image-name

Answer 5

I have another approach to achieve this. in this approach you have to build your react app outside the container and pass the build to the container.

UI App Spin-up using Ngnix

docker-compose.yml

version: "3"
services:
  uiApp:
    build:
      context: .
    image: uiApp:latest
    container_name: uiApp
    volumes:
      - [ path of ui app build ]:/usr/share/nginx/html
      - ./conf:/etc/nginx/conf.d/ #map conf dir in project to ngnix container conf.d
    ports:
      - 80:80

dockerfile

FROM nginx
LABEL APP_ID="ui-App"
RUN rm /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g", "daemon off;"]

ngnix.conf

location: ./conf/ngnix.conf

server {    
    listen 80;  
    server_name host.docker.internal;   

    location / {    
            root   /usr/share/nginx/html;   
            index  index.html index.htm;    
    }       
}

I know this this is not the approach you want, But this is another workaround to spinup UI applications using Ngnix

Answer 6

Another approach that you are working in build React App inside the docker container

dockerfile

FROM node:10
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

docker-compose.yml

version: '3'
services:
  uiApp:
    build:
      context: .
    ports:
      - 4680:3000
    command: npm start

Command to build and run the container

docker-compose build uiApp
docker-compose up uiApp

Answer 7

I research on your problem which was

web_1 | npm ERR! enoent ENOENT: no such file or directory

According to answers I found on GitHub threads and Stackoverflow like https://stackoverflow.com/a/52222749/5108695

If you already have package-lock.json file just delete it and try again.

So please run exec docker container and rm (Remove) package-lock.json. and then try to run your npm task

The problem comes when your docker-compose copy all the content from . location to app dir of the container.

So what you can do, remove package-lock.json every time container spin-up which is not a good practice

Use of .dockerignore

place at the same location where docker-compose and dockerfile is.

---

.dockerignore

#add your file which you want to ignore while docker processing
package-lock.json

Try these steps your problem will be fixed.

have any doubts please comment