How to include SignalR with gulp build process?

Question

When I run my Durandal app with main.js (not minified), it loads signalr.core and signalr.hubs correctly, however, after building with gulp, it fails to load signalr.hubs.

Here is my RequireJS config:

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-3.2.0',
        'knockout.validation': '../Scripts/knockout.validation',
        'bootstrap': '../Scripts/bootstrap',
        'jquery': '../Scripts/jquery-2.1.3',
        'jquery.utilities': '../Scripts/jquery.utilities',
        'toastr': '../Scripts/toastr',
        'offline': '../Scripts/offline',
        'signalr.core': '../Scripts/jquery.signalR-2.2.0.min',
        "signalr.hubs": '../signalr/hubs?'
    },
    shim: {
        'jquery.utilities': {
            deps: ['jquery']
        },
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jQuery'
        },
        'knockout.validation': {
            deps: ['knockout']
        },
        'signalr.core': {
            deps: ['jquery'],
            exports: '$.connection'
        },
        'signalr.hubs': {
            deps: ['signalr.core'],
        }
    }
});

define('jquery', function () { return jQuery; });
define('knockout', ko);
define('moment', moment);

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/composition', 'global/session', 'knockout', 'knockout.validation', 'signalr.core', 'signalr.hubs'], function (system, app, viewLocator, composition, session) {
});

Here is my gulpfile:

var gulp = require('gulp');
var durandal = require('gulp-durandal');

gulp.task('durandal', function () {
    durandal({
        baseDir: 'app',   //same as default, so not really required.
        main: 'main.js',  //same as default, so not really required.
        output: 'main-built.js', //same as default, so not really required.
        almond: true,
        minify: true
    })
        .pipe(gulp.dest('app'));
});

I don't fully understand the minification process, but I do know that SignalR is not AMD compliant so that might be the issue. Also, the hub endpoint produces dynamic JavaScript so it would make sense that it can't be included in the build.

What am I missing to get signalr.hubs to play nicely with main-built.js? Should I load SignalR separately from RequireJS?

score 2 · Accepted Answer · answered Mar 18 '15 at 15:39

I guess there are ways to make the dynamic endpoint work, but as you already thought that's a bit of a different beast to treat. I would suggest you either use the proxyless approach (which removes the need of the dynamic endpoint, but you'll have to tweak your calls and event handlers a bit), or you add a step to your build process to serialize the dynamic endpoint through the signar.exe utility, as explained here.

How to include SignalR with gulp build process?

1 Answers1