Failing to establish a communication socket with the server after migrating my full stack app to Docker

[poussefra]

The frontend of my application has been developed using React.
The backend server is powered by an Express Server, which is developed using Node.js.

The full stack application worked well and I decided to containerised it with Docker which has led to a network issue when the client tries to establish a communication socket with the server: <const socket = io.connect('http://app:5000');>

The error I get is Failed to load resource: net::ERR_NAME_NOT_RESOLVED.

When looking at the details the network error I get is detailed below:

Request URL: http://app:5000/socket.io/?EIO=4&transport=polling&t=OzyifjO
Request Method: GET
Status Code: 307 Internal Redirect
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
Cross-Origin-Resource-Policy: Cross-Origin
Location: https://app:5000/socket.io/?EIO=4&transport=polling&t=OzyifjO
Non-Authoritative-Reason: HSTS
Accept: /
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36 Edg/124.0.0.0

I have containerised the application using Docker and the docker-compose.yml file is attached below:

version: "3.8"
services:
client:
container_name: client
restart: always
build: ./lat-client
ports:
- "3000:3000"
networks:
- lihuaap-network
depends_on:
- app
app:
container_name: app
restart: always
build: "./LAT Server"
ports:
- "5000:5000"
networks:
- lihuaap-network
depends_on:
- mongo
mongo:
container_name: mongo
image: mongo
restart: always
expose:
- "27017"
volumes:
- ./data:/data/db
ports:
- "27017:27017"
networks:
- lihuaap-network

networks:
lihuaap-network:
driver: bridge

the app and client share the same network and docker network inspect returns the following:

[
{
"Name": "lihuaassistivetechnologies_lihuaap-network",
"Id": "1c2bf2760ea715358f29cc5374b03335c4f161b5555a5edf82609635c3c2d90d",
"Created": "2024-05-16T12:56:04.328127963Z",
"Scope": "local",
"Driver": "bridge",
"EnableIPv6": false,
"IPAM": {
"Driver": "default",
"Options": null,
"Config": [
{
"Subnet": "172.18.0.0/16",
"Gateway": "172.18.0.1"
}
]
},
"Internal": false,
"Attachable": false,
"Ingress": false,
"ConfigFrom": {
"Network": ""
},
"ConfigOnly": false,
"Containers": {
"94644925d58aa5658a2419875516d318f08ff02827c28813a14537c094d05a27": {
"Name": "mongo",
"EndpointID": "db2a1e0e4e8e3e175a619a63d7efde59e0d9c938a03c139c90a7e857a11adfa1",
"MacAddress": "02:42:ac:12:00:02",
"IPv4Address": "172.18.0.2/16",
"IPv6Address": ""
},
"a4cf823f989697f0d64d3d2477a421ceed4c7ef41912cfc686e9cf8d34427451": {
"Name": "app",
"EndpointID": "751172dbbeb56ba413499046407caa122619d2ea726ce256aed754b7df9c76e6",
"MacAddress": "02:42:ac:12:00:03",
"IPv4Address": "172.18.0.3/16",
"IPv6Address": ""
},
"d0c3bd4774dce65932d1cf3e198cd87135a2164c71df9fa4c113f87074c950b2": {
"Name": "client",
"EndpointID": "3c993f423232bf8729f448f6c207aa4d46148fc414811097b2a74c77da8615ac",
"MacAddress": "02:42:ac:12:00:04",
"IPv4Address": "172.18.0.4/16",
"IPv6Address": ""
}
},
"Options": {},
"Labels": {
"com.docker.compose.network": "lihuaap-network",
"com.docker.compose.project": "lihuaassistivetechnologies",
"com.docker.compose.version": "2.27.0"
}
}
]

the DNS resolution is working well and nslookup app in the client container returns the right address:

docker exec -it d0c3bd477 bash:
root@d0c3bd4774dc:/client# nslookup app
Server: 127.0.0.11
Address: 127.0.0.11#53

Non-authoritative answer:
Name: app
Address: 172.18.0.3

I have defined a proxy in my client package.json file:

{
"name": "lat-client",
"version": "0.1.0",
"private": true,
"proxy": "http://app:5000/",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@popperjs/core": "^2.11.8",
"@reduxjs/toolkit": "^2.2.1",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.7",
"bootstrap": "^5.3.3",
"currency-codes-ts": "^3.0.0",
"firebase": "^10.8.1",
"process": "^0.11.10",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"redux": "^5.0.1",
"redux-persist": "^6.0.0",
"simple-keyboard": "^3.7.65",
"simple-peer": "^9.11.1",
"socket.io-client": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

The server is initialised as below:

// ---------------------------------------------------------------------
// Initialise Express Server
// ---------------------------------------------------------------------

const app = express();
const server = http.createServer(app);

const io = new Server(server, {
cors: {
origin: ["http://localhost:3000", "http://client:3000"],
methods: ["*"]
}
});

// ---------------------------------------------------------------------
// MIDDLEWARE
// ---------------------------------------------------------------------

app.use(express.json());
app.use(cors());

Can anyone help?