Question 82609 in Docker Question posted in
The official documentation can be found here.

How to communicate Express API and React in separate Docker containers

I have a simple application that grabs data from express and displays it in react. It works as intended without docker, but not when launching them as containers. Both React and Express are able to launch and can be viewed in browser at localhost:3000 and localhost:5000 after running docker

How they are communicating

In the react-app package.json, I have
"proxy": "http://localhost:5000"
and a fetch to the express route.

React Dockerfile

FROM node:17 as build

WORKDIR /code

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.12-alpine

COPY --from=build /code/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Express Dockerfile

FROM node:17

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 5000

CMD ["npm", "start"]

docker-compose.yml

version: "3"
services:
  react-app:
    image: react
    stdin_open: true
    ports:
      - "3000:80"
    networks:
      - react-express
    
  api-server:
    image: express
    ports:
      - "5000:5000"
    networks:
      - react-express

networks:
  react-express:
    driver: bridge
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using a proxy in package.json does not work, so instead you can put this in your react app. The same Dockerfile and docker-compose setup is used.

      const api = axios.create({
    baseURL: "http://localhost:5000"
  })

    and make request to express like this

    api.post("/logs", {data:value})
    .then(res => {
      console.log(res)
    })

    This may raise an error with CORS, so you can put this in your Express API in the same file that you set the port and have it listening.

    import cors from 'cors'

const app = express();

app.use(cors({
    origin: 'http://localhost:3000'
}))

  2. 0

    from your example I figured out that you are using react-scripts?

    If so, proxy parametr works only for development for npm start.

    Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/todos point to the right thing in production.

    here: https://create-react-app.dev/docs/proxying-api-requests-in-development/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search