Some of my friends have been using Heroku and recommend me to use it to deploy apps. I am comfortable with setting up the full stack from OS to application as I like server configuration, nevertheless I gave Heroku a try since it has a free tier on it.

alt text

alt text

alt text

alt text

Deploying node.js app on Heroku is like a piece of cake until I go to view my app and this popped out :

alt text

What went wrong?

Deploying directly using GitHub is kinda tricky because there is no system log to reference which you can view using Heroku Toolbelt. I have spent many hours on trying to find a solution around stack overflow and google, I should have read Heroku Documentation earlier Orz. Turns out I missed Procfile and a port configuration.


Procfile is used to tell Heroku what command should be executed to start your app, this text file should be stored in the root of your application using the filename Procfile (no filename extension).

The web keyword here tells Heroku that this app process will be attached to the HTTP routing stack of Heroku and will receive web traffic when deployed. The node index.js will execute the index.js file as the main node application.

Port configuration

For local testing I used port 3000 for the node.js app but Heroku doesn’t give you a fixed port for app and it will dynamically assign you one through process environment variable. Heroku recommends you to use their process environment variable(process.env.PORT) as shown in below :

I changed the port configuration from fixed port 3000 to the format as shown above and it worked finally TwT/.

The node.js app

The app I have deployed on Heroku is located here. I am currently using Heroku free plan for this app so there will be 6 hours of sleep time a day =(. Try opening the app on two tabs/browsers and you can see both of your characters. I developed this app while learning node.js using express.js framework and, it allows multiple players to see each other movement. The source code is available on GitHub. Thanks for trying >w</!