React-Nodejs app frontend does not load with docker-compose up in my network but works in localhost

Question

I have a react nodejs application and it works fine running in local but when I dockerize it and run docker-compose up, only localhost page loads, not for network. I am not sure where my configuration gets wrong for frontend and I would appreciate your help!

I have one dockerfile for frontend(react) and one dockerfile for backend(nodejs). I also have a docker-compose.yml file. The file structure looks like below:

--api(dir for backend)
 --dockerfile
--my-app(dir for frontend)
 --dockerfile
--dockercompose.yml

My docker file for frontend is as below:

FROM node:10
WORKDIR /my-app
COPY . .
RUN npm install && npm run build
EXPOSE 3000

CMD ["npm", "start"]

My dockerfile for the backend is as below:

FROM node:10
WORKDIR /api
COPY ./package*.json .
RUN npm install
COPY . .
EXPOSE 3080

CMD ["node", "--require",  "./tracing.js",  "./server.js"]

My docker-compose file is as below:

version: '3'
services:
  app-backend:
    build: ./api
    container_name: app-backend
    ports:
        - "3080:3080"

  app-frontend:
    depends_on:
      - app-backend
    build: ./my-app
    container_name: app-frontend
    ports:
        - "3000:3000"
    tty: true

This is how my frontend package.json look like:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://app-backend:3080",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

In the server.js file in api directory(backend), I have the app listen to port 3080.

port = 3080
app.listen(port, () => {
    console.log(`Server listening on the port::${port}`);
});

After docker-compose up, I see

You can now view my-app in the browser.

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

Running http://localhost:3000 in browser brings up my app, but http://192.168.160.3:3000 never works and it shows me 'cannot reach the page'. My question is what is this address - 192.168.160.3 ? What are the possible reasons I cannot load http://192.168.160.3:3000? Another question is does the port 3080 in server.js has to be the same as what is defined in backend dockerfile? It does not seem so, but I don't know why.

Phil · Accepted Answer · 2022-12-08 00:46:14Z

1

You can now view my-app in the browser.

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

React's startup script is reporting the LAN IP of the container. This won't be available outside of the Docker network itself and in this case, is a useless piece of information.

If you want to connect via a LAN address, you'll need to use the IP address of the host computer.

does the port 3080 in server.js has to be the same as what is defined in backend dockerfile?

If you're referring to EXPOSE, the answer is "not exactly". EXPOSE is basically documentation and doesn't technically do anything.

What you do need to do is forward to the appropriate container port. So if your server binds to port 3080 in the container, your ports config in compose needs to use

ports:
  - "<any available host port>:3080"

This is only required if you want to access the server directly from the host. Since you're proxying requests from the React dev server within the Docker network, you don't really need it at all.

edited Dec 8, 2022 at 0:46

answered Dec 8, 2022 at 0:39

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bunny Over a year ago

Thank you so much for your explanation Phil! For the EXPOSE 3080 in backend dockerfile, that means my server is listening on port 3080, what I don't understand is in my server.js, if my server is listening on port 8080 instead of 3080, does docker know sort of directing listening on port 8080 to 3080?

Phil Over a year ago

No. Like I said, EXPOSE is nothing more than documenting what ports your service uses. You don't need to use it at all but it can be handy for information. AFAIK, Docker cannot do automatic port detection

Collectives™ on Stack Overflow

React-Nodejs app frontend does not load with docker-compose up in my network but works in localhost

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related