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
Related
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 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 :
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?
At the top of my react component (Coffee.jsx), I have this import:
import ReactPlayer from 'react-player';
The package 'react-player' is certainly installed, present at package.json and node_modules/.
My code runs inside a docker container. Everytime I spin my containers up, like so:
docker-compose -f docker-compose-dev.yml up -d
I am getting this error:
./src/components/Coffees.jsx
Module not found: Can't resolve 'react-player' in '/usr/src/app/src/components'
this is what console shows me:
Brewing.jsx:22 Uncaught Error: Cannot find module 'react-player'
at webpackMissingModule (Brewing.jsx:22)
at Module../src/components/Coffees.jsx (Brewing.jsx:22)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Module../src/App.jsx (Spotify.css:4)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Module../src/index.js (spotify-auth.js:8)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Object.0 (index.js:10)
at __webpack_require__ (bootstrap:781)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
docker-compose-dev.yml:
client:
build:
context: ./services/client
dockerfile: Dockerfile-dev
volumes:
- './services/client:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- 3000:3000
environment:
- NODE_ENV=development
- REACT_APP_WEB_SERVICE_URL=${REACT_APP_WEB_SERVICE_URL}
depends_on:
- web
Dockerfile-dev:
# base image
FROM node:11.12.0-alpine
# set working directory
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
COPY package-lock.json /usr/src/app/package-lock.json
RUN npm ci
RUN npm install react-scripts#2.1.8 -g --silent
# start app
CMD ["npm", "start"]
folder structure:
services/
docker-compose-dev.yml
node_modules/
client/
Dockerfile-dev
package.json
package-lock.json
node_modules/
react-player/
Temporay fix:
The hack fixing this is waiting for some time, along with some forced changes in my code either in Coffee.jsx or Brewing.jsx.
After I save the changed code, the package is found.
Then, when I stop containers and up them again, problem resumes. I have trying using the flag --build after up -d, to no avail.
Whats going on? How do I fix this?
more persistent fix:
After removing volumes from docker-compose-dev.yml and rebuilding, like so:
#volumes:
#- './services/client:/usr/src/app'
#- '/usr/src/app/node_modules'
I still get the error:
client_1 | > client#0.1.0 start /usr/src/app
client_1 | > react-scripts start
client_1 |
client_1 | Could not find a required file.
client_1 | Name: index.html
client_1 | Searched in: /usr/src/app/public
client_1 | npm ERR! code ELIFECYCLE
client_1 | npm ERR! errno 1
client_1 | npm ERR! client#0.1.0 start: `react-scripts start`
client_1 | npm ERR! Exit status 1
client_1 | npm ERR!
client_1 | npm ERR! Failed at the client#0.1.0 start script.
client_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
client_1 |
client_1 | npm ERR! A complete log of this run can be found in:
client_1 | npm ERR! /root/.npm/_logs/2019-11-05T15_14_42_967Z-debug.log
Then it only works if I uncomment volumes again and run the containers with volumes. An answer explaining reasons for
a) temporary fix
b) more permanent fix
would be very appreciated.
Managing node_modules is such a pain with docker. There are great discussions on the stackoverflow about how you can run Javascrip app with docker. Here is how I do it,
Dockerfile
FROM node:11.12.0-alpine
# first installed node_modules in cache and copy them to src folder
RUN mkdir /usr/src/cache
WORKDIR /usr/src/cache
COPY package.json .
RUN npm install -q
# now make a different directory for src code
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# set path to run packages from node_modules
ENV NODE_PATH=/usr/src/app/node_modules/.bin
COPY . .
docker-compose.yaml
app:
build: .
image: app
container_name: services.app
volumes:
- .:/usr/src/app
ports:
- 3000:5000
# this will copy node_modules to src folder, otherwise node_modules will be wipeed out as we don't
# have the node_modules in the host machine
command: /usr/src/app/entrypoint.sh prod
And my entrypoint.sh file looks like
#!/bin/bash
cp -r /usr/src/cache/node_modules/. /usr/src/app/node_modules/
exec npm start
So, the basic idea here is, when you build the image you store the node_modules somewhere in the path, but when you actually run it, you copy that node_modules and place it in the app folder. This way, your local node_modules never clashes with the one in the docker.
You can add node_modules in .dockerignore if you want to make a COPY faster.
First Down services:
docker-compose -f docker-compose-dev.yml down
Then re-build services (without cache):
docker-compose -f docker-compose-dev.yml build --no-cache
In the last run services:
docker-compose -f docker-compose-dev.yml up
I will go for installing packages whenever container up it will install on start on stop as well plus if can control mechanism too when to install or when to go with build time modules.
#!/bin/sh
npm ci
npm install react-scripts#2.1.8 -g --silent
exec npm start
With this approach the container will always install updated node modules, also will not need to build each time during development.
Also, we can control this behaviour.
#!/bin/sh
if [ "$PACKAGE_UPDATE" = true ] ; then
echo 'installing fresh node modules'
# you can also remove existing modules at this step
npm ci
npm install react-scripts#2.1.8 -g --silent
fi
exec npm start
so the docker run for not installing packages will be
docker run -e PACKAGE_UPDATE=true -it my_image
and will mount the anonymous volume to not conflict with host node modules.
volumes:
- './services/client:/usr/src/app'
- '/usr/src/app/node_modules'