How do I make a react app in docker-compose? Container is exiting after build steps are complete

Question

I am trying to make a simple react app in docker-compose. I am using this reference What I have done is run npx create-react-app frontend to generate the default react app. Then I added the Dockerfile. This is all in a directory frontend.

#Dockerfile

FROM node:14.9

# set working directory
WORKDIR /app

# 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
RUN npm install [email protected] -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

In the directory above, I have my docker-compose

#docker-compose.yml

version: '3.7'

services:

  frontend:
    container_name: frontend
    build: ./frontend
    volumes:
      - './frontend:/app'
      - '/app/node_modules'
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true

I run docker-compose up --build and after the normal build process I get this message.

docker-compose up --build
Building frontend
Step 1/9 : FROM node:14.9
 ---> 1b2c72215052
Step 2/9 : WORKDIR /app
 ---> Using cache
 ---> 2bab04404275
Step 3/9 : ENV PATH /app/node_modules/.bin:$PATH
 ---> Using cache
 ---> ff4ce5f5ec47
Step 4/9 : COPY package.json ./
 ---> Using cache
 ---> b1d25c0b6c05
Step 5/9 : COPY package-lock.json ./
 ---> Using cache
 ---> 5b829feaf00d
Step 6/9 : RUN npm install --silent
 ---> Using cache
 ---> 835367c47253
Step 7/9 : RUN npm install [email protected] -g --silent
 ---> Using cache
 ---> 015ccb2db237
Step 8/9 : COPY . ./
 ---> Using cache
 ---> e4a5285339b5
Step 9/9 : CMD ["npm", "start"]
 ---> Using cache
 ---> 3f91b16d34d6

Successfully built 3f91b16d34d6
Successfully tagged projectname_frontend:latest
Recreating frontend ... done
Attaching to frontend
frontend    |
frontend    | > [email protected] start /app
frontend    | > react-scripts start
frontend    |
frontend    | ℹ ｢wds｣: Project is running at http://172.29.0.2/
frontend    | ℹ ｢wds｣: webpack output is served from
frontend    | ℹ ｢wds｣: Content not from webpack is served from /app/public
frontend    | ℹ ｢wds｣: 404s will fallback to /
frontend    | Starting the development server...
frontend    |
frontend exited with code 0

It seems the container just exits without an error message. I have no idea what is causing this. Docker version 19.03.12, build 48a66213fe

It is worth noting that I have been able to build my react apps successfully without the solutions below for the past few months. The need for the commands given in the solution has only recently become an issue for me.

Answer 1

I think I solved the issue. Adding stdin_open: true to the docker-compose.yml was half the solution. I also added command: npm start. After this, the container stopped exiting. I thought that the command in the Dockerfile would be sufficient. It seems to be working now.

docker-compose.yml

version: '3.7'

services:

  frontend:
    container_name: frontend
    build: ./frontend
    volumes:
      - './:/app'
      - '/app/node_modules'
    ports:
      - 3000:3000
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: npm start

Dockerfile

FROM node:14.9
 
WORKDIR /usr/src/app
 
COPY package*.json ./
 
RUN npm install
 
COPY . .
 
EXPOSE 3000
 
CMD [ "npm", "start" ]

Answer 2

This simple Dockerfile always works for me:

FROM node:10
 
WORKDIR /usr/src/app
 
COPY package*.json ./
 
RUN npm install
 
COPY . .
 
EXPOSE 8083
 
CMD [ "npm", "start" ]

I also like to add a stdin_open: true to my container in docker-compose.yml.