Reactjs Dockerisation Faild - reactjs

Question

What is this error? I cant run reactjs project in docker. I tried to run reactjs project in docker by docker-container using docker-compose.yml file and Dockerfile
app | npm ERR! syscall open
app | npm ERR! path /app/package.json
app | npm ERR! errno -2
app | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'
app | npm ERR! enoent This is related to npm not being able to find a file.
app | npm ERR! enoent
app |
app | npm ERR! A complete log of this run can be found in:
app | npm ERR! /root/.npm/_logs/2022-03-25T09_02_12_947Z-debug-0.log
docker-compose.yml
version: '3.6'
services:
pdp-front:
build:
context: .
dockerfile: pdp-front/Dockerfile
command: npm run start
container_name: app
ports:
- "9999:9999"
volumes:
- ./:/pdp-front
- /pdp-front/node_modules
Dockerfile
FROM node:alpine as builder
WORKDIR /app
COPY pdp-front/package.json ./app
RUN npm install
COPY . ./
ENV PATH /app/node_modules/.bin:$PATH
CMD ["npm", "start"]

Answer 1

You're dropping content into several different paths inside the container. I expect, if you docker-compose run pdp-front sh to get an interactive shell and look around, you'll see a file /app/app that's actually the package.json file, and then the rest of your application is inside a subdirectory /app/pdp-front/....
The easiest approach here is to set up the pdp-front/Dockerfile so that it installs an image based only on its own directory. So for any COPY instructions, the left-hand side will be relative to the pdp-front directory, and the right-hand side will be relative to the specified WORKDIR. The Dockerfile can look like:
FROM node:alpine as builder
WORKDIR /app
COPY package.json ./ # <-- no subdirectories on either side of this
RUN npm install
COPY . ./
ENV PATH /app/node_modules/.bin:$PATH
CMD ["npm", "start"]
Then in the docker-compose.yml file, you can specify the pdp-front directory as the build context directory and then use the default dockerfile: Dockerfile setting relative to that directory. Eliminating some other unnecessary options, this can reduce to just
version: '3.8'
services:
pdp-front:
build: ./pdp-front
ports:
- "9999:9999"
You need the build: { context: ., dockerfile: pdp-front/Dockerfile } in the case where the application needs content from one of its sibling directories. In this case you'll need to work out the right directory layout; perhaps
WORKDIR /app/pdp-front # default to the application-specific subdirectory
COPY pdp-front/package.json ./ # and install its specific dependencies
RUN npm ci
COPY . /app/ # copy the entire multi-project tree into /app
# RUN npm run build
CMD ["npm", "start"] # with the pdp-front subdirectory as WORKDIR