How can I debug a Yeoman generator KO (with typescript and gulp) Node JS project in Visual studio with Node JS Tools for visual studio

Question

I have created a Node JS project in Visual Studio (2012 professional and 2013 community) with NTVS and used a Yeoman generator to create a Knockout SPA app (using the typescript option in the generator setup).

Now I need to decide which file to set as the startup file when debugging (hitting F5). I suppose this would be ./src/app/require.config.js because otherwise I get an error that require is undefined.

When I start debugging everything looks fine and a console window appears with the message "Debugger is listening to port 5858". But when I start localhost:5858, there is no server/website.

I can start the app in a server on another port but then no breakpoints are being hit, not even in the startup file.

So my questions are: - what should I set as the startup file? - how do I debug my app in Visual Studio with NTVS?

---

Edit

I have determined that when I add a new empty NTVS project it creates a server.js file with:

var http = require('http');
var port = process.env.port || 1337;
http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
}).listen(port);

Setting this as the startup file results in working debugging for this file.

How can I still load require through require.config.js and start my app with startup.ts?

require.config.js

// require.js looks for the following global when initializing
var require = {
    baseUrl: ".",
    paths: {
        "bootstrap": "bower_modules/components-bootstrap/js/bootstrap.min",
        "crossroads": "bower_modules/crossroads/dist/crossroads.min",
        "hasher": "bower_modules/hasher/dist/js/hasher.min",
        "jquery": "bower_modules/jquery/dist/jquery",
        "knockout": "bower_modules/knockout/dist/knockout",
        "knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections",
        "signals": "bower_modules/js-signals/dist/signals.min",
        "text": "bower_modules/requirejs-text/text"
    },
    shim: {
        "bootstrap": { deps: ["jquery"] }
    }
};

startup.ts

import $ = require("jquery");
import ko = require("knockout");
import bootstrap = require("bootstrap");
import router = require("./router");

// Components can be packaged as AMD modules, such as the following:
ko.components.register('nav-bar', { require: 'components/nav-bar/nav-bar' });
ko.components.register('home-page', { require: 'components/home-page/home' });

// ... or for template-only components, you can just point to a .html file directly:
ko.components.register('about-page', {
  template: { require: 'text!components/about-page/about.html' }
});

ko.components.register('grid-page', { require: 'components/grid-page/grid-page' });

// [Scaffolded component registrations will be inserted here. To retain this feature, don't remove this comment.]

// Start the application
ko.applyBindings({ route: router.currentRoute });

---

Edit 2

upon further investigation I can start my app with a server.js file as startup file containing

var http = require('http');
var app = require('./src/app/startup.js');
var port = process.env.port || 1337;
http.createServer(app).listen(port);

but this results in the 'define is not defined' error.

Answer 1

Ok, after a little more research, I think the thing you are trying to do is wrong.

You are attempting to load jquery into a node environment. Node is a browserless execution environment. There is no window. There is no document. Comment from the top of the jquery file:

    // For CommonJS and CommonJS-like environments where a proper `window`
    // is present, execute the factory and get jQuery.
    // For environments that do not have a `window` with a `document`
    // (such as Node.js), expose a factory as module.exports.
    // This accentuates the need for the creation of a real `window`.
    // e.g. var jQuery = require("jquery")(window);
    // See ticket #14549 for more info.

I believe what you want to do instead is return an html from your server to a browser. That html should reference jquery, bootstrap and knockout - the client side javascript files that work on document - via script tags.

---

Also note: since the jquery and others are running in a browser, you will be unable to use visual studio to debug them (as far as I can tell). You should instead use browser tools to examine their behavior.

https://stackoverflow.com/a/21178111/8155

Answer 2

I think you are mixing up server development and browser development. A nodejs project is meant to run as a process on your machine and could act as a webserver amongst many other things. The knockout SPA app you are referring is meant to run in a browser environment. Only the Yeoman generator and some of te tools set up as part of the build process for the knockout template (gulp for example) need nodejs, but this is only required at build time, not when running your own code.

When you want to debug javascript in a browser you need to locate your main index.html file and open that one in a browser - some IDEs have functions to open a page on a built-in server and debug them directly (webstorm for example), others might require you to open the page in a browser and attache a javascript debugger. In Visual Studio you probably should open it in Internet Explorer and put a breakpoint in the js code in VS, I'm not certain if you also can directly open a page from VS and if you need to adjust IE settings (ask google, it knows better than me)