Socket connection issue after heroku deployment

[Vijay Rathod]

When I deploy my website to heroku app everytime it is connecting to new port

In the client code, we are adding static port
const SERVER_URL = 'http://localhost:8080';

public initSocket(): void {
this.socket = socketIo(SERVER_URL);
}
Therefore, after deploying the website on heroku, socket is not working.

Could you please tell me how you made it possible on heroku deployment.
Is it due to I am using free service of heroku (may be). I dont know the reason.

Thanking you in advance.

[brandon flowers]

@gibbsvjy007 yes you don't want to set a static port - check out this stackoverflow post about picking up the port number dynamically

It would be nice to have some deployment documentation though - I'm interested in how to deploy to zeit.co on to best deploy both client and server.

@gibbsvjy007 when you deployed to heroku did attempt to deploy the client and server separately? or together?

from the root directory, did you simply type: heroku deploy?

[brandon flowers]

@luixaviles can you open a wiki page so that we can add deployment notes for each platform like heroku and zeit?

zeit.co deployment

I've successfully deploy to zeit separating the client and the server. Here are my steps:

1. first I attempted to deploy the server

cd server
now

No problems... so after a successful deploy... I did:

now alias https://socket-io-typescript-example-aknmfgiriy.now.sh mapdrops-api

I have a side project called mapdrops about analyzing run data and learning Angular 5. I used the alias 'mapdrops-api' to mark it as my API.

2. update the client to point to this new remote url https://mapdrops-api.now.sh instead of localhost:8080 and use the environment files as configuration.

export const environment = {
  production: true,
  url: 'https://mapdrops-api.now.sh'
};

Find src > app > chat > shared > services > socket.service.ts

import { environment } from '../../../../environments/environment';
import * as socketIo from 'socket.io-client';

//const SERVER_URL = 'http://localhost:8080';
const SERVER_URL = environment.url;

I ran client locally and it connected to the remote url so I felt confident to deploy it

now

After a successful deploy... I did the alias

now https://typescript-chat-client-djuavnsujl.now.sh mapdrops  

This time, when I checked the url https://mapdrops.now.sh in the browser I got:

Invalid host header

I encountered this problem yesterday and, while I don't have a perfect fix for it yet, this does work:

Edit package.json

"start": "ng serve --disable-host-check",

If anyone has a better solution here, I'd like to hear it ;-D

I deployed it again, did the alias, and both the client and server are talking to each other now:

working demo

[Luis Aviles]

@headwinds I just created the initial wiki page. It has public access now.
Please feel free to contribute with your setup instructions.

Thank you!

[brandon flowers]

@luixaviles awesome - I've moved the zeit notes over to it and stubbed in a heroku section for @gibbsvjy007 to complete ;-D

[Luis Aviles]

Just added a reference to Readme file with the notes added by @headwinds. Thanks a lot for your contribution.