Unable to run a development build of a React app in a Docker container using node:alpine

Question

I have a React app which is based on Facebook's create-react-app. During development I run it on a specific local port (60001). To achieve this I changed the default start script in the scripts part of my package.json to the following:

    "start": "set PORT=60001 && react-scripts start",

I now have a requirement to run this in a Docker container using the same port. In my Dockerfile I have these two stages:

FROM node:alpine as build
COPY ./package.json /app/package.json
WORKDIR /app
RUN npm install
RUN rm -f .npmrc

FROM build as build-dev
COPY ./public/ /app/public
COPY ./src/ /app/src
EXPOSE 60001
CMD ["npm", "start"]

Notice I'm exposing the port on the container that I expect the npm dev server to bind to.

I build the image as you'd expect, targeting the build-dev Docker stage above.

docker build --target build-dev -t my-app:local

I then run the container like this:

docker run -it -p 60001:60001 my-app:local

The intention is to bind my local port 60001 to the same port on the container when I expect my dev app build to be running.

When I do this I see confirmation that npm is running the correct script and that the app has compiled. However, browsing to http://localhost:60001/ gives me nothing. Just an ERR_CONNECTION_REFUSED, as if there's nothing there.

I can't see what I'm doing wrong here. Any ideas? I'd hoped I might be able to get some insight from the container logs, but when I run docker logs for this container I just see the react scripts output confirming my app compiled.

Answer 1

If you are using docker-compose adding this one line solved the problem for me...

The line is stdin_open: true.

Here is a basic example of my docker-compose.yml:

version: "3.7"

services:
  test-app:
    stdin_open: true
    container_name: test-app
    build: .
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app

Example Dockerfile for reference:

FROM node:alpine

WORKDIR /app

COPY package.json yarn.lock ./

RUN yarn install

COPY . .

EXPOSE 3000

CMD ["yarn", "start"]

For more information on this I would checkout the github issue for create-react-app

GitHub Issue

---

Good luck! This drove me nuts for hours

PS Not sure how this will hold up in a production build

Answer 2

Seems like the app bind with container localhost.

Try to debug

docker exec -it <container_id> ash
#then
curl localhost:60001

It should work on localhost.

To make it accessible from outside of container do the following.

# i think its window syantax
"start": "set PORT=60001 HOST=0.0.0.0 react-scripts start",

or

"start": "PORT=60001 HOST=0.0.0.0 react-scripts start",

HOST:

By default, the development web server binds to all hostnames on the device (localhost, LAN network address, etc.). You may use this variable to specify a different host.

advanced-configuration HOST option react-app