I decided to fork Meatspace (see previous post) because I wanted to host a private chatroom that I could use with friends.

As usual, it was not as straightforward as just download and use.

I ran into a few hurdles. What follows are the steps I took to get it working on Heroku. Heroku allows you to host your apps for free, so feel free to use this as a guide for setting up your own chatroom.

1) Waypoints

The following repository referenced in package.json was moved from,
https://github.com/imakewebthings/jquery-waypoints
to https://github.com/imakewebthings/waypoints

You therefore need to change where it’s referenced accordingly,

"dependencies": {
    //"waypoints": "imakewebthings/jquery-waypoints.git#922fa1a5b4435e8aba032fadbe009a2647b32239"
    "waypoints": "imakewebthings/waypoints"
},
...
"browser": {
    //"waypoints": "./node_modules/jquery-waypoints/lib/noframework.waypoints.js"
    "waypoints": "./node_modules/waypoints/lib/noframework.waypoints.js"
  },

2) Heroku ports

To get Meatspace working on Heroku, you need to use the port created by Heroku.

In index.js change,

var server = Hapi.createServer(nconf.get('domain'), nconf.get('port')); 

To,

var port = process.env.PORT || nconf.get('port');
var server = Hapi.createServer(nconf.get('domain'), port);  

3) Npm start

In package.json, I changed this

"start": "gulp & nodemon index.js"

To,

"start": "node index.js"

This was after running gulp once to populate the dist folder. I don’t see the need to run gulp each time the app is run as I’m not changing any of the source files.

If you wish to keep gulp in the loop see this StackOverflow answer.

4) Gitignore

Remove dist folder from gitignore.

5) Custom music (optional)

In music.js, redirect to your own JSON file and music

This,

return $.getJSON('https://dl.dropboxusercontent.com/u/1913694/128382random.json')

Becomes this,

return $.getJSON('music/random.json')   

Or wherever your music files are.

6) FFmpeg on Heroku

Meatspace relies on FFmpeg to convert video into gifs. It’s easy enough to install FFmpeg on a local machine, but a whole other story to get it running on Heroku!

Luckily, I found this great guide that shows how to use FFmpeg on Heroku. However, the prebuilt FFmpeg binary referenced does not have the extensions Meatspace needs to work. And neither do any of the FFmpeg binaries I could find. Sad face.

It was time to do the unthinkable *dramatic pause* - Compile from source!

I used Ubuntu to compile the binary because Heroku runs on linux and I wanted everything to play nice. It was daunting to compile from source without step by step instructions, but thankfully the libraries I needed were made by the same team so installing each was a similar process.

Fun stuff! Didn’t work.

Much searching and many attempts later I learned that it wasn’t working because I used apt-get when installing some of the libraries. These libraries were thus installed to system folders instead of to the folder with the ffmpeg.exe. All the lovely details on that here.

Here is the FFmpeg build I made. If you plan on hosting Meatspace it will save you a lot of agony.

— Long story short —

Run this to tell Heroku you wish to use multiple buildpacks

$ heroku config:add BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-multi.git

Then make a file called .buildpacks with the following content,

https://github.com/jetstarblues/heroku-buildpack-ffmpeg.git
https://github.com/heroku/heroku-buildpack-nodejs.git

6) It's ALIVE!

With that, I got it working. And hopefully it works for you too.