CODEWITHSUNDEEP
node.jsreactjsdocker
user10033434
user10033434

Reputation: 455

Error after using docker compose up in react and express project

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:-

enter image description here

Upvotes: 2

Views: 694

Answers (1)

MauriceNino
MauriceNino

Reputation: 6747

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

Upvotes: 2

Related Questions