Error after using docker compose up in react and express project

Question

That's my very first docker project, and I've followed several articles on medium on how to use docker with an existing react + express node js project.

Important note to mention, I don't want to use the build command on the react (client) side of the project.

How can I solve this error and run this project properly?

Thanks in advance...

This error is thrown when I use the command docker-compose up:-

Creating waha_api_1 ... done 
Creating waha_client_1 ... done 
Attaching to waha_api_1, waha_client_1 api_1   
  | npm ERR! code ENOENT api_1  
  | npm ERR! syscall open api_1   
  | npm ERR! path /api/package.json api_1   
  | npm ERR! errno -2 api_1   
  | npm ERR! enoent ENOENT: no such file or directory, open '/api/package.json' api_1   
  | npm ERR! enoent This is related to npm not being able to find a file. api_1   
  | npm ERR! enoent api_1   
  | api_1   
  | npm ERR! A complete log of this run can be found in: api_1   
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_46_07_679Z-debug.log client_1
  | npm ERR! code ENOENT client_1
  | npm ERR! syscall open client_1
  | npm ERR! path /client/package.json client_1
  | npm ERR! errno -2 client_1
  | npm ERR! enoent ENOENT: no such file or directory, open '/client/package.json' client_1
  | npm ERR! enoent This is related to npm not being able to find a file. client_1
  | npm ERR! enoent client_1
  | client_1
  | npm ERR! A complete log of this run can be found in: client_1
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_47_03_120Z-debug.log client_1
  | npm ERR! code ENOENT client_1
  | npm ERR! syscall open client_1
  | npm ERR! path /client/package.json client_1
  | npm ERR! errno -2 client_1
  | npm ERR! enoent ENOENT: no such file or directory, open '/client/package.json' client_1
  | npm ERR! enoent This is related to npm not being able to find a file. client_1
  | npm ERR! enoent client_1
  | client_1
  | npm ERR! A complete log of this run can be found in: client_1
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_47_04_690Z-debug.log waha_client_1 exited with code 254 client_1
  | npm ERR! code ENOENT client_1
  | npm ERR! syscall open client_1
  | npm ERR! path /client/package.json client_1
  | npm ERR! errno -2 client_1
  | npm ERR! enoent ENOENT: no such file or directory, open '/client/package.json' client_1
  | npm ERR! enoent This is related to npm not being able to find a file. client_1
  | npm ERR! enoent client_1
  | client_1
  | npm ERR! A complete log of this run can be found in: client_1
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_47_06_078Z-debug.log waha_client_1 exited with code 254 client_1
  | npm ERR! code ENOENT client_1
  | npm ERR! syscall open client_1
  | npm ERR! path /client/package.json client_1
  | npm ERR! errno -2 client_1
  | npm ERR! enoent ENOENT: no such file or directory, open '/client/package.json' client_1
  | npm ERR! enoent This is related to npm not being able to find a file. client_1
  | npm ERR! enoent client_1
  | client_1
  | npm ERR! A complete log of this run can be found in: client_1
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_47_07_881Z-debug.log waha_client_1 exited with code 254 client_1
  | npm ERR! code ENOENT client_1
  | npm ERR! syscall open client_1
  | npm ERR! path /client/package.json client_1
  | npm ERR! errno -2 client_1
  | npm ERR! enoent ENOENT: no such file or directory, open '/client/package.json' client_1
  | npm ERR! enoent This is related to npm not being able to find a file. client_1
  | npm ERR! enoent client_1
  | client_1
  | npm ERR! A complete log of this run can be found in: client_1
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_47_09_661Z-debug.log waha_client_1 exited with code 254 client_1
  | npm ERR! code ENOENT client_1
  | npm ERR! syscall open client_1
  | npm ERR! path /client/package.json client_1
  | npm ERR! errno -2 client_1
  | npm ERR! enoent ENOENT: no such file or directory, open '/client/package.json' client_1
  | npm ERR! enoent This is related to npm not being able to find a file. client_1
  | npm ERR! enoent client_1
  | client_1
  | npm ERR! A complete log of this run can be found in: client_1
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_47_12_248Z-debug.log waha_client_1 exited with code 254 client_1
  | npm ERR! code ENOENT client_1
  | npm ERR! path /client/package.json client_1
  | npm ERR! errno -2 client_1
  | npm ERR! enoent ENOENT: no such file or directory, open '/client/package.json' client_1
  | npm ERR! enoent This is related to npm not being able to find a file. client_1
  | npm ERR! enoent client_1
  | client_1
  | npm ERR! A complete log of this run can be found in: client_1
  | npm ERR!     /root/.npm/_logs/2021-05-08T12_47_16_386Z-debug.log waha_client_1 exited with code 254 waha_api_1 exited with code 254

api dockerfile:-

# Use a lighter version of Node as a parent image
FROM node:12-alpine

# Set the working directory to /api
WORKDIR /api

# copy package.json into the container at /api
COPY package.json ./api
COPY package-lock.json ./api

# install dependencies
RUN npm install

# Copy the current directory contents into the container at /api
COPY . /api/

# Make port 80 available to the world outside this container
EXPOSE 80

# Run the app when the container launches
CMD ["npm", "start"]

client dockerfile:-

# Use a lighter version of Node as a parent image
FROM node:12-alpine

# Set the working directory to /client
WORKDIR /client

# copy package.json into the container at /client
COPY package.json ./client
COPY package-lock.json ./client

# install dependencies
RUN npm install

# Copy the current directory contents into the container at /client
COPY . /client/

# Make port 3000 available to the world outside this container
EXPOSE 3000

# Run the app when the container launches
CMD ["npm", "start"]

docker-compose.yml:-

version: "3"

services:
    client:
        build:
            context: ./client
            dockerfile: ./Dockerfile
        image: client
        restart: always
        ports:
            - "3000:3000"
        volumes:
            - ./client:/client
            - /client/node_modules
        links:
            - api
        networks:
            - webappnetwork

    api:
        build:
            context: ./api
            dockerfile: ./Dockerfile
        image: api
        restart: always
        ports:
            - "9000:9000"
        volumes:
            - ./api:/api
            - /api/node_modules
        networks:
            - webappnetwork

networks:
    webappnetwork:
        driver: bridge

my project structure:-

Dont do this workdir /api and copy ./api. The result will be /api/api/package.sjon — The Fool, May 10 '21 at 06:38

MauriceNino · Accepted Answer · 2021-05-10T09:42:38.543

If you set a WORKDIR in your Dockerfile, it is treated as if your current pwd is that location. Therefore what you are actually doing with the COPY step, is copying the contents to /api/api and /client/client respectively. More info on that topic here: What is the point of WORKDIR on Dockerfile?

See here for an example of a corrected Dockerfile:

FROM node:12-alpine

WORKDIR /api

# Only copy to the WORKDIR (with .)
COPY package.json .
COPY package-lock.json .

RUN npm install

# Same here
COPY . .

EXPOSE 80

CMD ["npm", "start"]

Also keep in mind, if your react app is written in typescript, you should have an extra step, to compile the TS files into JS.

I have an example of a Discord-bot Docker Container (Typescript) HERE (Keep in mind that this uses a .dockerignore file, thats why I just use COPY . .). It might not be perfect, but it gets the job done.

Cant help you much on your Docker-compose file, but a few points:

dockerfile: ./Dockerfile might be redundant, as "Dockerfile" should be default
Remove the image on both, because they should link to images in a registry. You either specify image OR build
Remove the links, because it is a legacy flag and not needed (source)
Omit the bindings, they are not necessary and defeat the point of using Docker
- After building the files needed for the application to run, should already be in the container. All you are doing is overriding files and potentially destroying the state in the container.

More explanation on the volume mounts:

Volume mounts are mounts from your container to your host system (or a virtual volume), that are bound ON RUNTIME and not ON BUILD.

You generally only use volume mounts for data that needs to persisted OUTSIDE the containers' lifecycle. Meaning - if the container dies, you still have the data.

For example, you might have a Database-Server, so you want to persist the data outside the container using a volume mount, because you don't want to lose all your data if your container crashes, and you have to spin up a new one. When you use a volume mount, you can just mount it again on the new container and all your data will be there.

You DON'T mount application data, like source code in your container. It is built ONCE and then stored inside the container. There is no need to mount the data.

So just remove the following volumes, links and image, until it looks like the following:

version: "3"

services:
    client:
        build:
            context: ./client
        restart: always
        ports:
            - "3000:3000"
        networks:
            - webappnetwork

    api:
        build:
            context: ./api
        restart: always
        ports:
            - "9000:9000"
        networks:
            - webappnetwork

networks:
    webappnetwork:
        driver: bridge

Thank you for your reply and your edits. But I don't follow the last 2 points you mentioned, which are: "Omit the bindings..." and "After building the files...". Can you explain these 2 in more details, please. I'm still new to docker. Thanks so much... — user10033434, May 10 '21 at 08:53
@user10033434 No problem :) I have added a more throughout explanation to my answer. Try if it works and if it not, let me know. If the error changes, you might be better off creating a new question — MauriceNino, May 10 '21 at 09:45
During development it is common to mount the application data. — Sarke, May 12 '21 at 00:20
@Sarke never heard that, but maybe it makes sense sometimes. Not here though. — MauriceNino, May 12 '21 at 07:27
@MauriceNino you've never heard of mounting the source repository during development? So you rebuild the docker image every 2 minutes when you make a change? What a waste of time. I've never heard of that for development. Mounting is the perfect solution, and one of the reasons you CAN mount folders. You want to develop in the same environment as you will be deploying. But tell me, why doesn't it make sense? — Sarke, May 26 '21 at 05:15
@Sarke Well first of all I only use Docker privately, so I don't really collaborate with it that much. I just run my things locally (like `ng serve`). But I can get why you would want to mount it - still don't think that this example is one of the use-cases, because 1) We are trying to get it running not developing it 2) There is no note to believe that this is a development container, so I assume that he wants to deploy this. I just believe he followed a tutorial without understanding what does mounts actually do. — MauriceNino, May 26 '21 at 17:08
@Sarke also I find it very hard to believe that mounting was created with Dev-containers in mind. I always thought they were created to persist data between multiple containers. Have no way of proving this though, just very hard to believe. — MauriceNino, May 26 '21 at 17:09

Error after using docker compose up in react and express project

1 Answers1