How to run two servers in heroku

Question

I have built a project in angular 9 for front end and nodejs as backend server. Now i am running node appserver.js for running the backend server. This listens

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