7

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.

Improve this question

2 Answers 2

Reset to default
2
+50

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)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

4 Comments

We have tried the amdefine package and that solved the 'define is undefined' error, but gave us the error 'jquery is undefined' as the requirejs.config.js file contains those paths and we can't seem to load those
sorry, error received is 'cannot find module 'jquery' '
I see, but what I don't understand is the link you provided. What does that have to do with our situation (apart from the NodeJS part)
That link shows someone returning some html with bootstrap and jquery (via jade) inside node. Jade would be one way to do what you're trying to do, but not the only way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.