EzDevInfo.com

List modules bundled by Browserify

I am using Browserify and Grunt to bundle our RendrJS webapp. I would like to analyze the bundle to see which modules it contains to see if any code is superfluous. This can happen since in Rendr some js code might only run on the server.

How do I get a list of the contents of the bundle. I have tried:

browserifyOptions: { 'list': true }

but it doesn't seem to have any effect. We are using Browserify 2.

How to use node js passport module with Rendr library

I am developing app with Airbnb's Rendr library. Everything is working fine, but when I trying to integrate Passport module I can't because I am using client routing so on server side I can't get like

app.get('/login', function(req, res) { })

is there any way to use Passport module in my application

how stable is AirBnB node.js rendr?

I wanted to know if anyone has been using AirBnB Rendr and is it stable and ok to use in commercial projects or is it still changing a lot?

I'm developing a website which can run both client and server based, this mean I need to be able to render pages and widgets server and client based.

The server is running Node.js, dust.js and has custom server based code to render the pages and widgets on the server side. I need to pick how to handle it on the client side. Naturally I want to try and not repeat code, but obviously the client is different I can:

1. Keep my current page based server rendering and develop custom client side code.
2. Use backbone.js on client side and keep my server based code the same.
3. Use AirBnB rendr that is based on Node.js and backbone to use the same code on client and o server. AirBnB Rendr Library

I like the 3rd idea very much, but I'm looking for some input from you guys. Has anyone used it? any experience with it in terms of stability and/or how often their api changes etc?

What is the purpose of using isomorphic webapps? [closed]

What I understood?

It shares some code between client and server as both are in javascript. eg: form validation.

How does this work? Can the shared code be seen from the browser? If yes then it becomes easy for an attacker to find loopholes in our code. Since the same code is being executed in the server side the attacker can pass through the server side validation too.

Are there any drawbacks or security issues if we follow this approach?

Grunt registerTask() Not Running Tasks in List

I have added the following registerTask calls to this Gruntfile.js

grunt.task.registerTask('runDebug', 'Run the app with debug flag', function() {
  var done = this.async();
  grunt.util.spawn({
      cmd: 'node',
      args: ['--debug', './node_modules/nodemon/nodemon.js', 'index.js'],
      opts: {
        stdio: 'inherit'
      }
    }, function (error, result, code) {
      if (error) {
          grunt.log.write (result);
          grunt.fail.fatal(error);
      }
      done();
    });
  grunt.log.writeln ('node started');
  grunt.util.spawn({
      cmd: 'node-inspector',
      args: ['&'],
      opts: {
          //cwd: current working directory
      }
    },
    function (error, result, code) {
      if (error) {
        grunt.log.write (result);
        grunt.fail.fatal(error);
      }
      done();
    });
  grunt.log.writeln ('inspector started');
});

grunt.task.registerTask('debug', ['runDebug', 'compile', 'watch']);

The new debug task is similar to the existing server task. However, grunt server command runs compile, watch, and runNode tasks, whereas grunt debug command only runs runDebug task.

What am I missing here? Why aren't the compile and watch tasks run with grunt debug command.

Airbnb Rendr RESTful API authentication

I've been playing around with AirBnb's Rendr using the app template they provided on GitHub.

In their example they connect to a RESTful API using HTTP Basic Auth. However in their code they provide the credentials for authentication directly on server startup like so:

$ BASIC_AUTH=githubusername:githubpassword grunt server

Now I'm asking myself if and how I can make this more dynamic, i.e. using the credentials a user has provided on the login of my client application or even use a different authentication schema, like OAuth for example?

Is this possible? Can someone provide an example?

$(window).on("load") not triggered in postRender

I have a jquery code that I have to trigger after the page is loaded, I am doing it in postRender function call of the view, but postRender and window load event are totally async, so, the window load event might happen before I am in postRender adding the listener for the load event, is there any replacement for the function in this case, or am I missing something?

thanks for the help

Pre-load/pre-render a JS MVC app server-side before serving it

We have built a huge "persisted" web application in Knockout.js, which works this way:

1.A basic light html page is sent to the client, with some background image and a few elements

2.An AJAX request is made by the client to the server which responds with a huge JSON file containing all the parameters for configuring the client side app.

3.The JSON is parsed by the client and its parameters are used to build Knockout's models

4.Knockouts renders the web app.

5.The user uses the web app, and when his actions change the Knockout model, we also notify the server of that changes, which registers them in a database

Doing so, when the user uses the app and then reloads the page, the changes he made are still there because the server had saved them into the database and he can now put them in the JSON file which will build up the app again. The application state is persisted.

This works well but the first part (1 to 4) is damn long. The JSON parsing client-side is heavy (usually the JSON conf file is 500-5000 lines long), and the client-side first view rendering is also very long. The first loading (json gen by server, then client json parsing, model creation and view rendering) can take from 3 to 10 seconds which is way too long

I thought of moving steps 2-4 to the server. In that case the steps would be:

1.A basic light html page is sent to the client, with some background image and a few elements

2.The server creates an MVC JS app for the client, based on his data from the DB.

3.An AJAX request is made by the client to the server for the JS app.

4.The client received the web app, and when the user actions change the app model, we also notify the server of that changes, which registers them in a database

Our current server is PHP but we have no problems in switching to Node if needed.

My question is, is that a good idea, and is that possible ? With which technologies ? We can rebuild the app with another JS MVC if Knockout doesn't fit those needs.

I already had a look at Render Backbone.js application on the server AND the client

Rendr seems to be a good option, or am I wrong ? Are there other options available ?

Browserify and Rendr using Gulp

I am trying to browserify a Rendr application. I have tried multiple ways with no success.

Here is one version that I have tried using Gulp-browserify(Now deprecated in favor of plain browserify).

gulp.task('browserify-gulp', function() {
    gulp.src(['app/**/*.js'])
    .pipe(gulpbrowserify())
    .pipe(concat('mergedGulp.js'))
    .pipe(gulp.dest('public/'));
  });

And this errors out

Error: module "app/router" not found from rendr_project/node_modules/rendr/shared/app.js"

Here is a different approach using stock Browserify and vinyl-source-stream. This gives me the same error.

gulp.task('browserify', function() {
  var bundle = browserify( './app/app.js' ).bundle();
  return bundle.pipe(source( 'mergedAssets.js' )).pipe(gulp.dest('public/'));
});

The line in .../shared/app.js that cause this behavior is

if (!isServer) {
  ClientRouter = require('app/router');// <---here
  Backbone.$ = window.$ || require('jquery');
}

Any guidance would be greatly appreciated.

For reference, here is the same task using Grunt and Grunt-Browserify.

browserify: {
    options: {
      debug: true,
      alias: [
        'node_modules/rendr-handlebars/index.js:rendr-handlebars'
      ],
      aliasMappings: [
        {
          cwd: 'app/',
          src: ['**/*.js'],
          dest: 'app/'
        }
      ],
      shim: {
        jquery: {
          path: 'assets/vendor/jquery.js',
          exports: '$'
        }
      }
    },
    app: {
      src: [ 'app/**/*.js' ],
      dest: 'public/mergedAssets.js'
    }
  }
});

This works great, but I would like to move everything over to gulp which seems much more intuitive.

EDIT:

I have found a work around using gulp-browserify.

gulp.src(['app/**/*.js'])
  .pipe(browserify({
    insertGlobals: true,
    debug: !gulp.env.production
  }).on('prebundle', function(bundler) {
    bundler.require( __dirname + '/app/router', {expose: 'app/router'} );
    bundler.require( __dirname + '/app/views/base', {expose: '../base'});
  }))
  .pipe(concat('mergedAssets.js'))
  .pipe(gulp.dest('public/'));

This compiles and the app seems to be working, but the file output seems to have ballooned to over 8 mb while the file compiled with grunt-browserify is steady at 1.5mb. I also see errors in the browsers console where certain modules are not being found. Another downside it gulp-browserify being blacklisted. And it seems that browserify does not have support for the 'prebundle' event.

You can also see that I have to require two files in my app. Currently there are a total of 6 files. I imagine as the app becomes complex I will have to manually require more files.

AliasMapping is indeed a much needed feature of Browserify. Hopefully someone knows a way to get this working using just Browserify.

Backbone - Populating multiple models from one fetch call in my controller

Say I have a collection (of search results, for example) which needs to be populated and a pagination model that needs to take values for current page, total number of pages, etc. In my controller, I make a GET call to an API which returns both search results and pagination information. How, then, can I fetch all this information and parse it into a collection and a separate model? Is this possible?

I am using AirBNB's Rendr, which allows you to use a uniform code base to run Backbone on both the server and the client. Rendr forces me to parse the API response as an array of models, keeping me from being able to access pagination information.

In Rendr, my controller would look like this:

module.exports = {
    index: function (params, callback) {
        var spec = {
            pagination: { model: 'Pagination', params: params },
            collection: { collection: 'SearchResults', params: params }
        };
        this.app.fetch(spec, function (err, result) {
            callback(err, result);
        });
    }
}

I apologize if this is not clear enough. Feel free to ask for more information!

How do I use Rendr's model's rendr/shared/base/model under Node?

I'm trying to migrated from Backbone to Rendr, and I can't figure out how to get a Rendr model working under node (which is supposed to be the explicit goal of Rendr). I can't find any documentation on this. Does anyone have any pointers.

"use strict";
var BaseModel = require('rendr/shared/base/model');

var CustomModel = BaseModel.extend({
  url:'/foo'
});

var myObj = new CustomModel();

// doesn't work
myObj.save();

The error I get is this,

TypeError: Cannot read property 'req' of undefined
    at serverSync (/home/ecarroll/code/samp/node_modules/rendr/shared/syncer.js:67:17)

I'm using rendr 1.0.5. What am I missing to get this to work...

CommonJS Modules - Exporting a function that returns a function with arguments

In this rendr - sessions example, there's an express middleware module...

module.exports = function incrementCounter() {
  return function incrementCounter(req, res, next) {
    var app = req.rendrApp
      , count = app.get('session').count || 0;
    req.updateSession('count', count + 1);
    next();
  };
};

Can you not achieve the same thing with the following?

module.exports = function incrementCounter(req, res, next) {
  var app = req.rendrAp
  , count = app.get('session').count || 0;
  req.updateSession('count', count + 1);
  next();
};

My Question is, why would you export a function which returns a function with arguments? Is there some sort of benefit to the former that I am unaware of?

how to specify optional parameter for rendrjs router

I went through the documentation of the router of rendrjs and there is no mention of an optional parameter, and although they are saying, it's build very similar to the backbone router, it doesn't understand () as optional parameter...

so, does anyone here know what might be the way, or a work around it?

thanks in advance

Mocha run rendr collection ajax unit test

I try to use rendr(backbone in client&server) to create a webapp and try to implemented some unit test.

Is there a way to run collection fetch unit test in mocha? I want to use sinon-chai to mock ajax request in mocha. But Error happen when I try to stub $ "ajax" in this way,

var chai = require("chai");
var rekuire = require("rekuire");
var sinon = require("sinon");
var $ = require("jquery"); //because this is node-jquery, we don't have ajax function.
chai.use(require("sinon-chai"));

require("chai").should();
require("mocha-sinon");

var Books = rekuire("app/collections/books");

describe("Books interaction with REST API", function() {
    it("should load using the API", function(){
        //TypeError: Cannot stub non-existent own property ajax
        this.ajax_stub = this.sinon.stub($, "ajax").yieldsTo("success", [
            {
                count: 20,
                "books": [
                    {
                        title: "Google1",
                        author: ["author1", "author2"]
                    },
                    {
                        title: "Google2",
                        author: ["author3", "author4"]
                    }
                ]
            }
        ]);
        this.books = Books.fetch();
        this.books.should.have.length(2);
        this.ajax_stub.restore();
    });
}); 

My question is, is there a way to stub $.ajax function when we run unit test in mocha?

Running Rendr Examples Results in HTTP 502 Error When Links Clicked

I have built and run Rendr's example apps on Ubuntu 13.10 using Node v0.8.6. When I click on the Repos or Users links, I get an HTTP 502 - Bad Gateway error, but when I refresh page (load from server) it works (200 - OK) and the repos or users are displayed

Here is server output for the working case - (page refresh):

127.0.0.1 - - [Fri, 31 Jan 2014 22:47:56 GMT] "GET /repos HTTP/1.1" 200 - "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/32.0.1700.102 Chrome/32.0.1700.102 Safari/537.36"

And here is the failure case - (link navigation):

127.0.0.1 - - [Fri, 31 Jan 2014 22:48:07 GMT] "GET /api/-/users HTTP/1.1" 502 - "http://localhost:3030/users" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/32.0.1700.102 Chrome/32.0.1700.102 Safari/537.36"

Any ideas or pointers to what the problem might be?

Thanks.