Using NPM module in Backbone with RequireJS - node.js

Question

Hejsa,
I'm writing a webapp, which consists of a Node backend (Express server), which serves a Backbone app to the clients.
The Backbone app uses RequireJS to load the modules used.
I would like to use Ag-grid clientside, which can be included as an NPM module.
https://www.ag-grid.com/javascript-grid-getting-started/index.php
How can I reference this NPM module from Backbone?
Project structure
./node_modules
./src/package.json
./src/app (Node backend + Express server)
./src/public
./src/public/main.coffee (contains requireJs config)
./src/public/scripts (Backbone views, models, etc)
main.coffee
require.config
baseUrl: '../scripts/'
paths:
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min'
jqueryui: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'
...
I would like to include the ag-grid NPM module here, but without having to reference the very top ./node_modules folder as ../../../node_modules/ag-grid/dist/ag-grid (didn't count the levels..).
Also, I'd like if possible to avoid a second package.js, and a secondary npm install
Any help related specifically to this project structure?
Secondarily, is there any better way to structure such a project? (Node backend serving a Backbone webapp)
Thanks

Answer 1

You guessed it and using a relative path all the way to the node_modules directory is the way to go.
requirejs.config({
paths: {
"ag-grid": "../../../node_modules/ag-grid/dist/ag-grid",
"backbone": "../../../node_modules/backbone/backbone"
}
});
define(["backbone", "ag-grid"], function(Backbone, agGrid) {
// whatever
});
You could also use npm for all the dependencies and bundle an optimized version of your app using the RequireJS optimizer (r.js).
Personally, I use npm for the development of the project and for server-side (node) dependencies. For my Backbone app, I use Bower as it's specialized in front-end dependencies management.
I have a .bowerrc file that tells bower where to install the dependencies:
{
"directory": "src/lib",
}
And a Gulp task which calls bower install:
var bower = require("bower"),
$ = require('gulp-load-plugins')({ lazy: true }),
gulp = require("gulp");
gulp.task('bower', function() {
return bower.commands.install()
.on('log', function(data) {
$.util.log('bower', $.util.colors.cyan(data.id), data.message);
});
});
this task is called automatically after npm install with a npm hook:
"scripts": {
// ...
"postinstall": "gulp install"
}
Take a look at simplified-js-project, a sample project which shows my development tools around a Backbone and RequireJs project.