Heroku app w/ socket.io refuses connection or sends 404 - reactjs

Question

After days of trying to figure out what's wrong, I came here to seek help.
My Heroku app is using React as frontend and Socket.io as backend. Here's the drill:
Heroku runs dyno with command "npm run start", which is set to concurrently 'npm run react' 'npm run server' to run both front and back ends.
But even if I make it work (can't really even explain how), it only works on my computer. If I try going to the same page on my phone, no requests are made and I can't even tell why, since there is no debug log.
Here is my /src/server/index.js file:
const express = require("express");
const app = express();
const server = require("http").Server(app);
const io = module.exports.io = require('socket.io')(server)
const port = process.env.PORT || 80
const socketManager = require('./SocketManager') // All functions there
io.on('connection', socketManager);
// app.use(express.static(__dirname + '/../../build'))
server.listen(port,() => {
console.log("Listening on port", port)
})
I use config file to dynamically change for the server url.
let server = 'https://hidden-waters-73936.herokuapp.com/socket.io/?EIO=4&transport=websocket'; // 404
// let server = window.location.hostname; // 404, same as above
// let server = 'http://localhost:4001'; // works locally on heroku
// let server = '/'; // 404, not found, AND CONNECTION_REFUSED
// let server = 'https://127.0.0.1:4001'; // CONNECTUIN_REFUSED
// let server = 'http://0.0.0.0:4001'; // Doesn't work at all
module.exports = server;
Commented out lines are those that I tried. Last try was changing https to ws, as someone recommended earlier, then I tried adding .com:80/socket.io..., but still no luck. Every time it's a different Error
Here's what the errors are like with uncommented server variable:
https://imgur.com/Lf0BxV3
I expect it to make successful requests both on my computer and phone. I'll try my laptop to see the logs and check back if I find anything useful.
**UPDATE for #Ashish
React component
import server from '../../config/serverConfig'
const socket = socketIOClient(server);
componentDidMount() {
socket.emit("test", {});
}
** EDIT:
My Heroku logs seem to tell me something else is going on:
2019-05-13T16:59:55.472135+00:00 app[web.1]: [1] [33m[nodemon] 1.19.0[39m
2019-05-13T16:59:55.474073+00:00 app[web.1]: [1] [33m[nodemon] to restart at any time, enter `rs`[39m
2019-05-13T16:59:55.475362+00:00 app[web.1]: [1] [33m[nodemon] watching: *.*[39m
2019-05-13T16:59:55.477060+00:00 app[web.1]: [1] [32m[nodemon] starting `node src/server/index.js`[39m
2019-05-13T16:59:56.164302+00:00 app[web.1]: [1] Listening on port 40497
2019-05-13T16:59:56.573081+00:00 heroku[web.1]: State changed from starting to up
2019-05-13T16:59:57.538639+00:00 app[web.1]: [0] Something is already running on port 40497.
2019-05-13T16:59:57.585807+00:00 app[web.1]: [0] npm run react exited with code 0
2019-05-13T17:01:19.780332+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/" host=hidden-waters-73936.herokuapp.com request_id=42a6c345-94b7-441a-afde-82c1e9c52e97 fwd="90.191.14.93" dyno=web.1 connect=1ms service=30004ms status=503 bytes=0 protocol=https

Answer 1

Solution:
At least for me it works for now. Here's what I changed:
server config file (AKA what client is listening for)
let server = window.location.hostname;
const env = process.env.NODE_ENV;
if (env === 'development') {
server = 'http://localhost:4001';
console.log("Using dev port")
}
module.exports = server;
package.json
"scripts": {
"client-install": "npm install",
"start": "node src/server/index.js",
"server": "nodemon src/server/index.js",
"client": "npm start",
"build": "react-scripts build",
"react": "react-scripts start",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install && npm run build"
Heroku procfile:
web: npm start
HOWEVER.
I use React Router to navigate through different pages. As soon as a page is refreshed on heroku, it returns "Not found". I suppose it is looking for a .html file with the path name, but I need it to rewrite to index.html like Firebase does.
I tried using create-react-app-buildpack, with the nginx thing and it seems to crash my server with
Failed to load resource: the server responded with a status of 405 (Not Allowed)
and then changes listening point (I suppose)
polling-xhr.js:269 POST https://XXXXXXXXXX.herokuapp.com/socket.io/?EIO=3&transport=polling&t=MgpToRX 405 (Not Allowed)
Is there a way to determine why the problem is occuring? Heroku logs dont seem to tell anything useful.