JavaScript

Using Parcel bundler

Runs code, does "hot module replacement", you can watch what's happening... beautiful.

Except - does not work in Visual Studio -- it does not always see changes.

Except - does not work with Emacs -- unless you turn off autobackup files with this in your .emacs:

(setq make-backup-files nil)

I like backup files but I like hot module replacement even more.

Using Visual Studio

Currently I am using Microsoft Visual Studio. Visual Studio Code looks nice but I don't feel a need to develop new skills right now. One IDE to rule them all and in the darkness bind them! Uh yeah.

I installed the Node.JS workload in VS and installed the (standalone) portable Node.JS package.

Now in VS I can create a web Node.JS project, and I can run and test the complete app on my desktop so I don't need any access to a real web server.

In my VS project, I have to set the Node.exe path to C:\Users\bwilson\Portable\node-v8.11.3-win-x64\node.exe Once I do that it can find the other tools like npm too.

My typical server.js looks like this

var http = require('http');
var port = process.env.PORT || 1337;
var path = require('path'),
    fs = require('fs');
var base = 'C:/GeoModel/WebMaps/OpenlayersApp';

http.createServer(function (req, res) {
    
    pathname = base + req.url;
    if (req.url === '/') {
        pathname = base + '/index.html';
    }
    console.log(pathname);

    if (fs.exists(pathname)) {
        res.writeHead(404);
        res.write('Page not found 404\n');
        res.end();
    } else {
        res.setHeader('Content-Type', 'text/html');
        res.statusCode = 200;
        var file = fs.createReadStream(pathname);
        file.on("open", function () {
            file.pipe(res);
        });
    }

}).listen(port);

console.log("Server running on port ", port);

When I run the project, it launches server js and in turn launches a browser and serves up my index.html. I can click local links therein. I can edit the index.html and hit reload in the browser and ta-da! there's my updated page.

Debugging the client

Refer to https://docs.microsoft.com/en-us/visualstudio/debugger/client-side-script-debugging

NOTE if you have 15.7 installed: Change in 15.7

I was able to change my default browser to IE and get that going. Good news. Now I need to make it work in Chrome, this guy's page helped me: JavaScript debugging in VisualStudio with Chrome and Chrome's page on the subject.

1. Start chrome in remote debug mode: chrome.exe --remote-debugging-port=9222
2. Attach Visual Studio: "Debug" -> "Attach to Process..." -> select the chrome instance

Done.