Application Error when attempting to deploy Node.js/Express/Socket.io application on Heroku

Question

I am fairly new to all of these technologies (including somewhat JavaScript) so you might have to bear with me here.

I followed the ChatApp tutorial over at Socket.IO docs fairly closely and modified the application to my likings somewhat; however, I don't think I changed much on the side of server interaction and stuff. My problem is no matter what I do, I can't seem to be able to get my application to successfully run on Heroku. I get this error message when trying to load the app:

Application Error An error occurred in the application and your page could not be served. Please try again in a few moments. If you are the application owner, check your logs for details.

I am not sure if I am missing something obvious or what.

Here is my main index.js file:

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendfile('index.html');
});

app.use("/css", express.static(__dirname + '/css'));

//array of users currently in chat
var people = {};

io.on('connection', function(socket){
    console.log('user connected!');

    socket.on('join', function(name){
        people[socket.id] = name; //create entry in 'people' with new user
        socket.emit("update", "You have connected to the server.");
        io.sockets.emit("update", name + " has joined the server.");
        io.sockets.emit("update_people_list", people);
    });

    socket.on('disconnect', function(){
        console.log('user disconnected!');
        if(people[socket.id] != ""){
            io.sockets.emit("update", people[socket.id] + " has left the server.");
            delete people[socket.id];
            io.sockets.emit("update_people_list", people);
        }
    });

    socket.on('chat message', function(msg){
        console.log('message: ' + msg);
        io.sockets.emit('chat message', people[socket.id], msg);
    });
});


// http.listen(3000, function(){
//  console.log('listening on *:3000');
// });

index.html

<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
  $(document).ready(function(){
    var ready = false;
    var socket = io.connect();

    $("#chat").hide();
    $(".canvasDiv").hide();
    $("#name").focus();
    //prevent form from being submitted without name
    $("form").submit(function(event){
      event.preventDefault();
    });

    //allows entering by hitting 'Enter' for name
    $("#name").keypress(function(e){
      if(e.which == 13) { //if ENTER key
        var name = $("#name").val();
        if(name != ""){
          socket.emit("join", name);
          $("#login").detach();
          $("#chat").show();
          $("#msg").focus();
          ready = true;
        }
      }
    });

    $('#chatform').submit(function(){  //when submit chat message
      socket.emit('chat message', $('#msg').val()); //emit message + value of input
      $('#msg').val('');  //empty field?
      return false; //so that the page doesn't refresh
    });

    //SOCKET LISTENING
    socket.on('chat message', function(user, msg){
      if(ready){
        $('#messages').append("<p><strong><span class='chat-user'>" + htmlEntities(user) + " </span></strong>:  " + htmlEntities(msg) + "</p>");
        //adjust height and scroll as need be:
        var $container = $('#messages');
        var height = $container.get(0).scrollHeight;
        $container.scrollTop(height);
      }
    });

    socket.on("update", function(io_message){
      if(ready){
        $('#messages').append("<p class='notification'>" + htmlEntities(io_message) + "</p>")
      }
    });

    socket.on("update_people_list", function(people){
      if(ready){
        $("#people").empty(); //clear to refresh it
        $.each(people, function(client_id, name){
          $('#people').append("<p class='notification'>" + htmlEntities(name) + "</p>");
        });
        var $container = $("#messages");
        var height = $container.get(0).scrollHeight;
        $container.scrollTop(height);
      }
    });

  });
</script>

Additionally, my package.json file

 {
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {
    "express": "^4.6.1",
    "socket.io": "^1.0.6"
  }
}

Procfile:

web: node index.js

.gitignore:

node_modules/

Solution 1

Disclosure: I'm the Node Platform Owner at Heroku

First, you should run heroku logs to get logging output.

Second, do you mean to have commented out listen on your server? Without this, your server won't allow any incoming connections:

// http.listen(3000, function(){ // console.log('listening on *:3000'); // });

Finally, instead of binding to a hardcoded port (3000), you should bind to an environment variable with a default:

http.listen(process.env.PORT || 3000, function(){ console.log('listening on', http.address().port); });

Solution 2

I encountered the same error, but including "start":"node app.js" in package.json file tends to fix the problem. Hope this helps anyone that encounters the same error.

Note: app.js should be your own main server file.

Solution 3

After checking heroku logs I was able to find out that my bcrypt dependency defined properly in package.json. I would recommend you:

1. Check that your dependencies have the right versions attached to them.
2. Delete node_modules file
3. Run npm install
4. Check if all the dependencies installed properly
5. If they have installed properly, then git push heroku

Comments

[arora]

heroku logs helped me find out that express was installed in devDependencies and not in dependencies. I installed it in dependencies and it worked! Thanks!

[Ravi Kumar Yadav]

this is insane way, I lost all modules. Again, I need to install