i try to use my react app with docker without always rebuild image from my dockerfile. i use a docker-compose file to build my react app but i have always the same error.
PS : im new with Docker so certainly i made some mistakes.
before docker-compose up, i use docker-compose build
when i use docker-compose up i have this error :
frontend_1 | npm ERR! code ENOENT
frontend_1 | npm ERR! syscall open
frontend_1 | npm ERR! path /app/package.json
frontend_1 | npm ERR! errno -2
frontend_1 | npm ERR! enoent ENOENT: no such file or directory, open '/app/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-03-23T10_26_47_886Z-debug.log
rfid-commisioning_frontend_1 exited with code 254
my docker file :
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . ./
CMD ["npm", "start"]
my docker-compose file :
version: "3"
services:
frontend:
build: Front/RFID
command: ["npm", "start"]
environment:
- CHOKIDAR_USEPOLLING="true"
- NODE_ENV=development
volumes:
- "./Front/RFID/:/app"
- "/app/node_modules"
ports:
- "3000:3000"
Folder structure Frontend :
Folder Structure Global :
Related
I am trying to dockerize my react/typecsript application, but when I try to docker-compose run frontend it does not find the package.json file. I do not have a DockerFile, only a docker-compose.yml
docker-compose.yml:
`version: '3.5'
services:
frontend:
image: node:latest
volumes:
- ./frontend:/app
ports:
- 3000:3000
working_dir: /app
command: bash -c "npm i && npm start"`
My root folder is called FULL-STACK-CHALLENGE and structure of my folder as follow:
Project structure(https://i.stack.imgur.com/RkCbY.png)
When I try to run the docker-compose.yml file give this error:
Creating full-stack-challenge_frontend_run ... done
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /app/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2023-01-12T17_30_41_901Z-debug-0.log
ERROR: 254
And I also want to open this application at localhost:3000
Where is the mistake I am making?
I already try to change the name of working_dir or the name of volumes and even try to create a DockerFile and nothing works
I am trying to build a multi-container app using docker compose. However, the container build fails, and I have a feeling that it is connected to the fact that the app is built using typescript and vite. Could someone help me out? :)
this is my dockerfile:
# pull official base image
FROM node:13.12.0-alpine
WORKDIR /plantr_frontend
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
# add app
COPY . ./
# start app
CMD ["npm", "run", "dev"]
and this is my docker-compose.yml:
version: '3.7'
services:
sample:
container_name: sample
build:
context: ./plantr_frontend
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- 3001:3000
environment:
- CHOKIDAR_USEPOLLING=true
the project structure is:
PLANTR
- [dir] plantr_frontend (this is my react app, with Dockerfile in root of this folder
- docker-compose.yml
THE ERROR:
sample |
sample | > plantr_frontend#0.0.0 dev /plantr_frontend
sample | > vite --host
sample |
sample | (node:18) ExperimentalWarning: The ESM module loader is experimental.
sample | file:///plantr_frontend/node_modules/vite/bin/vite.js:7
sample | await import('source-map-support').then((r) => r.default.install())
sample | ^^^^^
sample |
sample | SyntaxError: Unexpected reserved word
sample | at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
sample | at async link (internal/modules/esm/module_job.js:37:21)
sample | npm ERR! code ELIFECYCLE
sample | npm ERR! errno 1
sample | npm ERR! plantr_frontend#0.0.0 dev: `vite --host`
sample | npm ERR! Exit status 1
sample | npm ERR!
sample | npm ERR! Failed at the plantr_frontend#0.0.0 dev script.
sample | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
sample |
sample | npm ERR! A complete log of this run can be found in:
sample | npm ERR! /root/.npm/_logs/2022-08-30T15_52_15_873Z-debug.log
sample exited with code 1
I was using an outdated version of Node.js, removed the version number to always use the latest image.
I created a dockerfile for frontend project and a docker compose project for the whole project. Running the frontend within a container works fine, however when I try with docker compose I always get the same error
Attaching to frontend_dev
frontend_dev | npm ERR! code ENOENT
frontend_dev | npm ERR! syscall open
frontend_dev | npm ERR! path /app/package.json
frontend_dev | npm ERR! errno -2
frontend_dev | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json'
frontend_dev | npm ERR! enoent This is related to npm not being able to find a file.
frontend_dev | npm ERR! enoent
frontend_dev |
frontend_dev | npm ERR! A complete log of this run can be found in:
frontend_dev | npm ERR! /root/.npm/_logs/2021-01-10T22_25_43_776Z-debug.log
frontend_dev exited with code 254
The dockerfile in the frontend folder is like this
#pull base image
FROM node:13.12.0-alpine
#set working directory
WORKDIR /app
#install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install
#add frontend to docker container
COPY . ./
#launch frontend app
CMD [ "npm", "start" ]
and the docker-compose.yml is as this:
version: "3.0"
services:
frontend:
container_name: frontend_dev
build:
context: ./frontend
dockerfile: Dockerfile
volumes:
- /app/node_modules
- .:/app
ports:
- 3001:3000
stdin_open: true
environment:
- CHOKIDAR_USEPOLLING=true
and here is the structure of the project.project structre ,
docker-compose.yml is at the root of both frontend and backend, and just frontend contains the Dockerfile related to it.
Our team created a react web app and want to use github action to push the project to Kuberntes. Here is the Dockerfile:
### STAGE 1: Build ###
FROM node:14.5.0 as build
RUN mkdir -p /src/app
WORKDIR /src/app
# Install app dependencies
COPY package.json /src/app/
RUN npm install && \
npm install -g pushstate-server
# Bundle app source
COPY . /src/app
# Build and optimize react app
RUN npm run build:staging
### STAGE 2: Production Environment ###
FROM nginx:1.19.2
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
when I run docker locally with command
docker build --tag abc:test .
It built the image successfully. But when I push it github action, it will stop at RUN npm run build:staging. And the Error message is
/src/app/src/Components/SideBar/SideBarLinks/index.tsx
TypeScript error in /src/app/src/Components/SideBar/SideBarLinks/index.tsx(124,9):
Property 'children' is missing in type '*** onEntered: () => void; ***' but required in type 'CollapseProps'. TS2741
122 | dropdownWrapperProps=*** 'data-tour': 'support-wrapper' ***
123 | dropdownToggleProps=*** 'data-tour': 'support-dropdown-button' ***
> 124 | collapseProps=***
| ^
125 | onEntered: () => ***
126 | const sidebarItemsWrapper = document.querySelector(
127 | '.side-bar-items-wrapper'
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-09-21T06_19_14_044Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dashboard_redo#4.0.0 api:staging: `cross-env REACT_APP_API_BASE_URL=https://staging.jetsonai.com/api/v3 npm run integrations-url:staging "npm" "run" "build"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dashboard_redo#4.0.0 api:staging script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-09-21T06_19_14_076Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dashboard_redo#4.0.0 build:staging: `cross-env REACT_APP_MODE=test npm run api:staging npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dashboard_redo#4.0.0 build:staging script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-09-21T06_19_14_093Z-debug.log
The command '/bin/sh -c npm run build:staging' returned a non-zero code: 1
##[error]Process completed with exit code 1.
Any idea?
i am trying to deploy create-react-app project using docker compose with the help of volumes. I'm using Docker for Windows on Windows 10 machine. I had removed node_modules folder from the project so that I can utilize RUN npm install from the docker file. But I'm getting following error logs:
$ docker-compose up --build Building web
Step 1/7 : FROM node:alpine
---> ef7d474eab14
Step 2/7 : ENV NPM_CONFIG_LOGLEVEL warn
---> Using cache
---> 12e0998d080a
Step 3/7 : WORKDIR '/app'
---> Using cache
---> 696072685749
Step 4/7 : COPY package.json .
---> Using cache
---> 2de967d1753e
Step 5/7 : RUN npm install
---> Using cache
---> 7fff07ced071
Step 6/7 : COPY . .
---> Using cache
---> b0722839dcb8
Step 7/7 : CMD ["npm", "run", "start"]
---> Using cache
---> f5a645333123
Successfully built f5a645333123
Successfully tagged frontend_web:latest
Starting frontend_web_1 ... done Attaching to frontend_web_1
web_1 |
web_1 | > frontend#0.1.0 start /app
web_1 | > react-scripts start
web_1 |
web_1 | sh: react-scripts: not found
web_1 | npm ERR! code ELIFECYCLE
web_1 | npm ERR! syscall spawn
web_1 | npm ERR! file sh
web_1 | npm ERR! errno ENOENT
web_1 | npm ERR! frontend#0.1.0 start: `react-scripts start`
web_1 | npm ERR! spawn ENOENT
web_1 | npm ERR!
web_1 | npm ERR! Failed at the frontend#0.1.0 start script.
web_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
web_1 | npm WARN Local package.json exists, but node_modules missing, did you mean to install?
web_1 |
web_1 | npm ERR! A complete log of this run can be found in:
web_1 | npm ERR! /root/.npm/_logs/2019-10-02T11_14_03_294Z-debug.log
frontend_web_1 exited with code 1
My dockerfile.dev is below:
FROM node:alpine
ENV NPM_CONFIG_LOGLEVEL warn
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "run", "start"]
And Docker-compose.yml is as follows:
version : '3'
services :
web:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- .:/app
- /app/nodes_modules
Please let me know which step is not correct?
Try after removing last line in docker-compose.yml
- /app/nodes_modules
I think problem is because of two volumes first for parent which also take node_module as child directory and 2nd volume is creating and managed by docker itself somewhere for node_modules folder. So seems like clash between volumes for node_module folder
I think there is typo in you docker-compose file.
- /app/node_modules not - /app/nodes_modules