Front end doesn't seem to start in docker of MERN appilcation - node.js

Question

I create simple app with mongo+express+react+node.
Here is the structure of files/folders
- client/
- - package.json
- - index.js <— frontend
- - Dockerfile
- server.js <— backend
- Dockerfile
- docker-compose.yml
- package.json
package.json in core folder calls "dev": "concurrently \"npm run server\" \"npm run client\""
Dockerfile in the client folder looks like:
FROM node:10.15.3
WORKDIR /usr/app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm","start"]
Dockerfile in core folder:
FROM node:10.15.3
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 8080
CMD ["npm","start"]
docker-compose.yml I put here https://gist.github.com/2u4u/2b13910c220f5a647f15d198a50ebe2a
when I start docker I see this:
[HPM]Proxy created: /api -> http://[::1]:8080/
ℹ️ ｢wds｣: Project is running at http://172.17.0.3/
ℹ️ ｢wds｣: webpack output is served from
ℹ️ ｢wds｣: Content not from webpack is served from /usr/app/public
ℹ️ ｢wds｣: 404s will fallback to /
Starting the development server...
Is it error on client side?
It was working well without docker. How can I fix it?

Answer 1

Your client and/or server is most likely listening to localhost which changes when you containerize your application. That's because containers have their own localhost which is different from the localhost on your host machine. Your app is listening to requests coming from inside the container and all requests from outside the container (your host machine) are ignored.
I see you're using http-proxy-middleware and webpack-dev-server. I'm not very familiar with the first, but with WDS you can add the flag --host 0.0.0.0 so webpack dev server will listen to all traffic and not just localhost. You'll have to do something similar with http-proxy-middleware.