Docker containerized React and Node.js app only accessible via localhost, network IP fails to connect

Frontend
1

I built a React frontend with Node.js backend that runs perfectly on my local machine. However, after containerizing both parts and using docker-compose, I can only access the app through localhost but not through the network IP address.

My project structure:

--server(backend folder)
 --dockerfile
--client(frontend folder)
 --dockerfile
--docker-compose.yml

Frontend Dockerfile:

FROM node:12
WORKDIR /client
COPY . .
RUN npm install && npm run build
EXPOSE 3000

CMD ["npm", "start"]

Backend Dockerfile:

FROM node:12
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 5000

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

Docker-compose configuration:

version: '3.8'
services:
  web-server:
    build: ./server
    container_name: web-server
    ports:
        - "5000:5000"

  web-client:
    depends_on:
      - web-server
    build: ./client
    container_name: web-client
    ports:
        - "3000:3000"
    tty: true

Client package.json includes:

{
  "name": "web-client",
  "version": "0.1.0",
  "proxy": "http://web-server:5000",
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-scripts": "4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

Server listens on port 5000:

const port = 5000;
server.listen(port, () => {
    console.log(`Application running on port ${port}`);
});

When I run docker-compose up, the output shows:

You can now view web-client in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.18.0.4:3000

The localhost URL works fine, but the network IP (172.18.0.4:3000) gives me a connection error. What could be causing this network accessibility issue?

2

hey, it sounds like ur frontend isn’t set up to listen for connections outside the container. try adding HOST=0.0.0.0 in the docker-compose for web-client, or change the start script to react-scripts start --host 0.0.0.0. that should fix it!

3

Your React dev server is binding to localhost by default, so it only accepts connections from inside the container. I hit this same issue with my first containerized React app. You need to bind the dev server to all network interfaces by setting HOST to 0.0.0.0 in your docker-compose.yml. Just add an environment section under your web-client service with HOST: “0.0.0.0”. This makes React accept connections from any IP, not just localhost. Also check that your backend server is listening on 0.0.0.0 instead of localhost in your Node.js code. This lets external traffic through while Docker’s networking layer still handles isolation and security.

4

Interesting setup! Quick question - when the network IP fails, are you testing from another machine on the same network or just your host? Also, check if your firewall’s blocking the docker bridge network ranges. Those 172.x.x.x addresses often get blocked by default firewall rules.