Deploying an airbnb rendr app in Heroku

Welcome to the second post about Rendr. In the following steps we are gonna see how to setup a Rendr app to upload it to Heroku. So less talking and more doing:

1. In the root directory we have to create a file called Procfile. Inside this file we have to write the following line:

1:  web: node index.js  

2. Then we modify Gruntfile.js, also in the root directory. Inside this file, at the bottom, we have to add the highlighted line:

0:    ... 
1:   // Default task(s).  
2:    grunt.registerTask('default', ['compile']);  
3:    grunt.registerTask('heroku:', ['compile']);  
4:   };  

3.  Due to the fact that we can't compile assets, templates and styles in the Heroku server, we have to compile those files in our workstation (running sudo grunt ) and then add them to the Heroku commit.
4. Upload all the files to Heroku and wait the start-up process.
5. Listo ;)

PS: If the dyno didn't start run : heroku  ps:scale web=1

I hope you find it useful.

@sdemians

How to integrate a third party library with airbnb rendr library

Hi all, today we are gonna integrate a third party library (we are going to use swipe as an example) with airbnb's rendr.

1. Download the last version of swipe.js from https://github.com/bradbirdsall/Swipe
2. Locate the library inside /app/lib
3. Inside the swipe.js file you have to replace the declaration line (line 8) adding "module.exports":

   Original file:

1:  /*  
2:   * Swipe 2.0  
3:   *  
4:   * Brad Birdsall  
5:   * Copyright 2013, MIT License  
6:   *  
7:  */  
8:  function Swipe(container, options) {  
9:   "use strict";  

With our small modification:

1:  /*  
2:   * Swipe 2.0  
3:   *  
4:   * Brad Birdsall  
5:   * Copyright 2013, MIT License  
6:   *  
7:  */  
8:  module.exports = function Swipe(container, options) {  
9:   "use strict";  

4. In the view file that you want to use swipe, you have to import it using the require function:

1:  ...  
2:     if (typeof window != 'undefined') {  
3:      var Swipe = require('../../lib/swipe');   
4:     };  
5:  ...  

5. Drop the swipe.css file inside assets/stylesheets/vendor folder. In addition modify assets/stylesheets/index.styl in order to import swipe.css stylesheet.

6. Listo ;)


@sdemians
thanks to: @spikebrehm and @ignavaldi