How to run two servers on Heroku?

Question

I have built a project in Angular 9 for the frontend and Node.js as the backend server.

Now I am running node appserver.js for running the backend server. This listens to port 9090 as default. In another terminal, I am running ng serve to run my Angular app on port 4200 as usual. I have a service in the Angular app that sends and receives messages from server.

I have used WebSocket class to connect to the port 9090. My app works fine in local. But now how could I deploy in Heroku. Heroku gives a random port number which will be specified as process.env.PORT. how could I get that port in my WebSocket service?

My questions are:

1. How to deploy two servers in Heroku?
2. How port number in appserver.js is specified as port number in WebSocket service in Angular?
3. Is there any use of the .env file and ProcFile to solve my problem?
4. Is there any use of multi-buildpack which is in Heroku to solve my problem?

Answer 1

1. You cannot deploy two separate servers when they each require a port. You will have to put them into separate apps. In some cases you can combine web servers. Deploying a server is done as regular.

2. When deploying a web service on Heroku Heroku provides you a port to which you have to bind to. You can then visit your web service under <appname>.herokuapp.com. (<-- this is why 1.) requires you to put them into separate apps.). Furthermore when you connect to the webservice you merely give the URL. That URL is automatically translated into <ipaddress>:<port>. So in your frontend you are not going to specify a port number. You are specifying the websocket URL in your frontend without any port.
   In your web server you bind to process.env.PORT.

3. .env file shouldn't be versioned/committed. No use. If you require environment variables you can set them through Heroku's dashboard. Procfile is not required since you are using Node.js it will look into your npm start script located in package.json. But it doesn't hurt to have since it gives clarity.

4. There is no multi-buildpack for this.

---

If your 2 servers are strictly distinct and use separate protocols. One using http, the other ws you can bundle your two servers into one. Here is an example:

const http = require('http');
const path = require('path');
const express = require('express');
const WSServer = require('ws').Server;
const DateFormat = require('dateformat');

let wss;
let server;
const app = express();
app.use(express.static(path.join(__dirname, './../build')));

server = new http.createServer(app);
wss = new WSServer({ server })

this.wss = wss;
wss.on('connection', function(socket) {
    console.log(DateFormat(new Date(), 'm/d h:MM:ss TT'),
        `client connected to server (${wss.clients.size} total)`);
    socket.on('message', function(data) {
        console.log(data)
    });
    socket.on('close', function(code, desc) {
        console.log(DateFormat(new Date(),
            "h:MM:ss TT"),'client disconnected, total:', wss.clients.length);
    });
});
wss.on('listening', () => console.log('Websocket listening on port', config.get('port')));
wss.on('error', err => console.log('Websocket server error:', err));

server.on('error', err => console.log('Server error:', err));
server.listen(process.env.PORT);

Example in a project:
https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/script/websock.js

In the project the backend with the websocket server was extended to include an express server serving the static files. Note that this change only exists in the heroku branch.

You will find all the relevant changes that made that project heroku compatible in this commit:
https://github.com/vegeta897/d-zone/commit/63730fd7f44d2716a31fcae55990d83c84d5ffea