JavaScript

I will be developing new county GIS Web applications using OpenLayers and that means updating my Web development skills with Node, Javascript, and friends.

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.