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.