React app exiting in docker container with exit code 0

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    | > <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8baada9abbce5a9b8b888f8e6f9e6f8">[email protected]</a> 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 <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e49681858790c9859494a4d4cad5cad4">[email protected]</a>~start: unsafe-perm in lifecycle true
react    | npm verb lifecycle <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e4c5b5f5d4a135f4e4e7e0e100f100e">[email protected]</a>~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 <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6e797d7f68317d6c6c5c2c322d322c">[email protected]</a>~start: CWD: /usr/src/app
react    | npm info lifecycle <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffdeaeeecfba2eeffffcfbfa1bea1bf">[email protected]</a>~poststart: <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f4d5a5e5c4b125e4f4f7f0f110e110f">[email protected]</a>
react    | npm verb exit [ 0, true ]
react    | npm timing npm Completed in 1727ms
react    | npm info ok 
react exited with code 0

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

It looks like an issue with [React-Scripts] v3.4.1. Please look into this link

Method 3

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

Method 4

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 <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a3b4b0b2a5fca2b2a3b8a1a5a291e2ffe5ffe1">[email protected]</a> -g --silent

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0