I am trying to create a docker-compose setup with nginzx, flask, and react. I started my react app with react-create-app (https://github.com/facebook/create-react-app) and haven't changed anything from it yet.
My Dockerfile for the react app is:
FROM node:10
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
COPY package*.json ./
RUN npm install --verbose
# Bundle app source
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
The compose script is:
version: '3.1'
services:
nginx:
image: nginx:1.15
container_name: nginx
volumes:
- ../:/var/www
- ./nginx-dev.conf:/etc/nginx/conf.d/default.conf
ports:
- 80:80
networks:
- my-network
depends_on:
- flask
- react
react:
build:
context: ../react-app/
dockerfile: ./Dockerfile
container_name: react
volumes:
- ../react-app:/usr/src/app
networks:
my-network:
aliases:
- react-app
expose:
- 3000
ports:
- "3000:3000"
flask:
...
networks:
my-network:
The flask and nginx containers start fine, the output for react is:
react |
react | > react-app@0.1.0 start /usr/src/app
react | > react-scripts start
react |
react | ℹ ｢wds｣: Project is running at http://my-ip-address/
react | ℹ ｢wds｣: webpack output is served from
react | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
react | ℹ ｢wds｣: 404s will fallback to /
react | Starting the development server...
react |
react |
react | npm verb lifecycle react-app@0.1.0~start: unsafe-perm in lifecycle true
react | npm verb lifecycle react-app@0.1.0~start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/usr/src/app/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
react | npm verb lifecycle react-app@0.1.0~start: CWD: /usr/src/app
react | npm info lifecycle react-app@0.1.0~poststart: react-app@0.1.0
react | npm verb exit [ 0, true ]
react | npm timing npm Completed in 1727ms
react | npm info ok
react exited with code 0
Adding: stdin_open: true to the React component of my docker-compose file fixed my issue.
Example:
version: '3.1'
services:
react:
build:
context: ../react-app/
dockerfile: ./Dockerfile
container_name: react
volumes:
- ../react-app:/usr/src/app
networks:
my-network:
aliases:
- react-app
expose:
- 3000
ports:
- "3000:3000"
stdin_open: true
Ran into same issue. Below mentioned steps resolved my problem: 1. add stdin_open: true
version: '3.1'
services:
nginx:
.
.
react:
stdin_open: true
.
.
2. Do not forget to build the container again after the above mentioned change is made.
docker-compose down
docker-compose up --build
As the issue is with react-scripts version > 3.4.0 as with the posted link from sandeep-reddy, you could pin the version that is installed by using these lines in the Dockerfile (credit Michael Herman).
Edit: Looks like you still need the line stdin_open:true in docker-compose.yml file for it to work.
RUN npm ci
RUN npm install react-scripts@3.4.0 -g --silent