Make it work (using a different server - not localhost)

.gitignore

@@ -2,4 +2,5 @@ node_modules
 package-lock.json
 dist
 .vscode
-.DS_Store
+.DS_Store
+.idea

README.md

@@ -6,8 +6,8 @@ This uses Docker to build/run the client and api on two seperate images. Clients
 
 ## UI
 <p align="center">
-  <img  src='https://github.com/Chrischuck/websocket-docker-example/blob/master/images/1.png' height='480' width='300'>
-  <img src='https://github.com/Chrischuck/websocket-docker-example/blob/master/images/2.png' height='480' width='300'>
+  <img  src='images/1.png' height='480' width='300'>
+  <img src='images/2.png' height='480' width='300'>
 </p>
 
 ## Goals of this repo

client/server.js

@@ -8,8 +8,8 @@ var PORT = 8080
 app.use(express.static(path.join(__dirname, 'dist')));
 
 app.get('*', function(req, res) {
-    res.sendfile('./dist/index.html');
-});
+  res.sendFile(__dirname + '/dist/index.html');
+  });
 
 
 app.listen(PORT, function(error) {
@@ -18,4 +18,4 @@ app.listen(PORT, function(error) {
   } else {
     console.info("==> 🌎  Listening on port %s. Visit http://localhost:%s/ in your browser.", PORT, PORT);
   }
-});
+});

client/src/redux/actions.js

@@ -1,16 +1,18 @@
 export function openConnection(payload) {
   return async function(dispatch) {
+
+    let url = window.location.host.replace('5008', '5006')
     let id = null
 
     if (!payload.id) {
-      id = await fetch('http://localhost:5006/id').then(res => res.json())
+      id = await fetch('http://' + url + '/id').then(res => res.json())
       //localStorage.setItem('id', id.id)
       dispatch({
         type: 'FETCH_ID_SUCCESS',
         payload: id
       })
     }
-    const ws = new WebSocket(`ws://localhost:5006/?id=${id ? id.id : payload.id}`)
+    const ws = new WebSocket(`ws://${url}/?id=${id ? id.id : payload.id}`)
 
     ws.onmessage = (e) => {
       const payload = JSON.parse(e.data)

docker-compose.yml

@@ -1,37 +1,59 @@
-version: '3.3'
-
 volumes:
   postgres-data:
 
 services:
-  chat-client:
-    build:
-      context: ./client
-      dockerfile: Dockerfile
-    image: chat/client
-    command: node server.js
-    ports:
-      - '5008:8080'
-  chat-api:
-    build:
-      context: ./api
-      dockerfile: Dockerfile
-    image: chat/api
-    command: bash -c "forever --watch src/index.js"
-    environment:
-      - POSTGRES_CONNECTION_URI=postgres://postgres:password@postgres:5432/chat
-    ports:
-      - '5006:3000'
+
   postgres:
     image: postgres
     restart: always
+
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
     volumes:
       - postgres-data:/var/lib/postgresql/data
+
     environment:
       POSTGRES_PASSWORD: password
       POSTGRES_DB: chat
+
     ports:
       - '5005:5432'
+
     expose:
       - '5432'
-
+
+  chat-api:
+    image: chat/api
+
+    build:
+      context: ./api
+      dockerfile: Dockerfile
+
+    command: bash -c "forever --watch src/index.js"
+
+    environment:
+      - POSTGRES_CONNECTION_URI=postgres://postgres:password@postgres:5432/chat
+
+    ports:
+      - '5006:3000'
+
+    depends_on:
+      postgres:
+        condition: service_healthy  # Wait for the postgres container to be healthy
+        restart: true
+
+  chat-client:
+    image: chat/client
+
+    build:
+      context: ./client
+      dockerfile: Dockerfile
+
+    command: node server.js
+
+    ports:
+      - '5008:8080'