can't run react app with docker container

Question

I have a react-app, which simple showing hello-world message but I like to run the app throug docker-container but having this problem. After this message, process stopped without running app..

ℹ ｢wds｣: Project is running at http://172.17.0.2/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /app/public
ℹ ｢wds｣: 404s will fallback to /
 Starting the development server...

Can't understand what I should do because I have very small app with basic code in Dockerfile

FROM node:alpine
RUN mkdir /app
COPY . /app
WORKDIR /app
COPY package.json ./
RUN npm install
CMD ["npm", "start"]

Do I need to install webpack-dev-server, I tried but got version error like 'manually added server' has lower version than already server. so I re-install the webpack-dev-server.

I have created app with 'create-react-app', so I think every dependency is managed automatically.. Is anyone have idea, how can I solve the problem.. thanks in advance (BTW..)

Command which I use to build: docker build . -t lucki

Command to run image: docker run -p 3000:3000 lucki

this is project stracture:

after adding DEBUG=* in Dockerfile, I have response as:

Answer 1

The problem is that the dev mode will not run if it is not an interactive terminal.

Change your docker command to include an interactive terminal:

Add -it to your docker run command (-i interactive, -t pseudo-TTY) e.g. docker run -it -p 3000:3000 your_container

Canonical troubleshooting

Make sure the code runs without docker

Does npm start work on the command line?

Showing debug info

Add DEBUG=* as an environment variable inside your container.DEBUG is an environment variable which controls logging for many Node modules.

In your Dockerfile, add

ENV DEBUG=*

Or on the command line, add -e 'DEBUG=*' to your docker command.

This may help spot error messages which are somehow getting swallowed

Run node directly

Instead of running npm start, run your file directly. e.g. in your Dockerfile,

CMD ["node", "index.js"]

Try running another docker container

If this is a problem with your docker setup, running a known good container may help you discover it.

docker run --rm -it node:alpine

Improvements

Your Dockerfile could also be simplified a bit.

FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
CMD ["npm", "start"]

• mkdir is not needed, as WORKDIR automatically creates the directory.
• package*.json will also copy package-lock.json
• --production will skip installing devDependencies
• Putting the COPY command last will leverage cache better (you won't have to re-run npm install unless your dependencies have changed)

You might also want to use Tini. Tini forwards signals, which means docker stop and pressing control+c in an interactive terminal will actually stop the node process immediately.

If you are using Docker 1.13+, add --init to the command line to have signals forwarded and processes reaped. On older versions, follow the instructions in the README

Answer 2

Same Problem I have Faced and it's fixed By using the following Command

Cause of Problem:- Due to react project setup it requires an input trigger to start the server if not it will automatically stop

FIX:- add -it with the docker run command

Example:- docker run --name main-app -it -p 3000:3000 main-image-react

Answer 3

In my case, I was running react app in 127.0.0.1 inside the container. When I changed 127.0.0.1 to 0.0.0.0 (allows you to access the app from outside of container) it worked. To see if you have the same problem:

1. sudo docker exec -it <your-container-name> sh
2. netstat -tuln

The result should look like this:

tcp 0 0 0.0.0.0:5173 0.0.0.0:* LISTEN

Answer 4

I got the same issue it solved when I use like

docker run -it -p 3000:80 <image name>

using -it other than -p and -d solved the issue.