Docker compose networking issue with react app

Question

I am running a react app and a json server with docker-compose.

Usually I connect to the json server from my react app by the following:


fetch('localhost:8080/classes')
    .then(response => response.json())
    .then(classes => this.setState({classlist:classes}));

Here is my docker-compose file:

version: "3"
services:
    frontend:
        container_name: react_app
        build:
            context: ./client
            dockerfile: Dockerfile
        image: praventz/react_app
        ports:
            - "3000:3000"
        volumes:
            - ./client:/usr/src/app
    backend:
        container_name: json_server
        build:
            context: ./server
            dockerfile: Dockerfile
        image: praventz/json_server
        ports:
            - "8080:8080"
        volumes:
            - ./server:/usr/src/app

the problem is I can't seem to get my react app to fetch this information from the json server.

on my local machine I use 192.168.99.100:3000 to see my react app

and I use 192.168.99.100:8080 to see the json server but I can't seem to connect them with any of the following:

backend:8080/classes

json_server:8080/classes

backend/classes

json_server/classes

{host:"json_server/classes", port:8080}

{host:"backend/classes", port:8080}

Both the react app and the json server are running perfectly fine independently with docker-compose up.

What should I be putting in fetch() ?

What's the error? Have you tried http://0.0.0.0:8080/classes? — skovy
– skovy, Commented Sep 19, 2019 at 22:25
Did you try to enable CORS in your JSON server? because you have two servers containerized, so in theory, if the CORS is not enabled you might get errors. — roag92
– roag92, Commented Sep 19, 2019 at 22:27
this produces: Unhandled Rejection (TypeError): Failed to execute 'fetch' on 'Window': Failed to parse URL from 0.0.0.0:8080/education — praventz
– praventz, Commented Sep 19, 2019 at 22:40

David Maze · Accepted Answer · 2019-09-20 01:08:28Z

1

Remember that the React application always runs in some user's browser; it has no idea that Docker is involved, and can't reach or use any of the Docker-related networking setup.

on my local machine I use [...] 192.168.99.100:8080 to see the json server

Then that's what you need in your React application too.

You might consider setting up some sort of proxy in front of this that can, for example, forward URL paths beginning with /api to the backend container and forward other URLs to the frontend container (or better still, run a tool like Webpack to compile your React application to static files and serve that directly). If you have that setup, then the React application can use a path /api/v1/... with no host, and it will be resolved relative to whatever the browser thinks "the current host" is, which should usually be the proxy.

answered Sep 20, 2019 at 1:08

David Maze

165k47 gold badges262 silver badges301 bronze badges

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

1 Comment

praventz Over a year ago

thanks for your explanation, unfortunately not even putting the ip works. I'm not sure what the problem is, will update this post if I find a solution.

Nikola Bodrozic · Accepted Answer · 2020-08-22 21:22:16Z

0

You have two solutions:

use CORS on Express server see https://www.npmjs.com/package/cors
set up proxy/reverse proxy using NGINX

answered Aug 22, 2020 at 21:22

Nikola Bodrozic

1163 bronze badges

Collectives™ on Stack Overflow

Docker compose networking issue with react app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related