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:

Can you also add the docker command you are using to bring up the container? — akazuko, Apr 05 '20 at 19:00
From inside the container can you verify if the port 3000 is being used? If not, I would recommend checking the default port on which the app is coming up (though if created from create-react-app, the default is 3000 but I don't see it getting logged) and mapping that in docker run command. — akazuko, Apr 05 '20 at 19:13
Port 3000 is not being used, and there is no any running container.. there is a stopped container with name 'Luki', but when I tried to run, it shows above message.. — Mr. Learner, Apr 05 '20 at 19:19
When you say "process stopped", you mean that `docker run` exits and returns to the command line? — Codebling, Apr 05 '20 at 19:19
I tried the same for a new react app quickly and things worked as expected. Can you share the logs of the exited lucki container? Command: `docker logs lucki` — akazuko, Apr 05 '20 at 19:38
Error: No such container: lucki,,,,,,, I got this response.. when I run command 'docker logs lucki'..... actually there is no any running container names 'Lucki' — Mr. Learner, Apr 05 '20 at 20:37

Codebling · Accepted Answer · 2021-09-14T12:50:41.560

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

@akazuko That's correct but I figured it could help and was too big to put in comments — Codebling, Apr 05 '20 at 19:14
I edit the question with a new picture, which I can see after adding DEBUG=* in Dockerfile.. is it helpful.. — Mr. Learner, Apr 05 '20 at 22:10
@Mr.Learner I have been able to reproduce your problem and I gave the solution in first line of answer — Codebling, Apr 05 '20 at 22:11
for those who want to do the same with docker-compose: https://stackoverflow.com/a/39150040/2215109 — Fernando Tholl, Oct 20 '20 at 18:43

Mayank Rai · Answer 2 · 2020-12-13T00:48:56.150

3

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

edited Dec 13 '20 at 00:48

answered Dec 12 '20 at 09:36

Mayank Rai

49
8

I missed to add it in the example sorry for that, I corrected it now – Mayank Rai Dec 13 '20 at 00:52

score 2 · Answer 3 · answered Mar 07 '23 at 06:52

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:

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

The result should look like this:

tcp 0 0 0.0.0.0:5173 0.0.0.0:* LISTEN

score 1 · Answer 4 · edited Dec 02 '21 at 05:39

1

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.

edited Dec 02 '21 at 05:39

Suraj Rao

29,388
11
94
103

answered Dec 02 '21 at 05:30

Chathu.Thanthrige

103
7