AspNetCore 2.0 - Add Node.JS Support


This is actually much more straightforward than it sounds, including some useful guides out there. There were a few key phrases, I felt were hidden, that I just want to emphasize here.


Install Node.JS for Windows

You can find it at nodejs.org. I personally installed the Current branch/flavor as I am doing a sandbox (read doesn't matter).

DevOps Note:
If you have Visual Studio 2017, CMD, or even PowerShell already running before you installed Node, they may have difficulty detecting the environment Path Node.JS is installed at. This means that in some builds or debugs, it will throw exception not finding the Node application path. Two ways to remedy, is just do a full restart, or just close and reopen those apps. They get environment paths on session startup. Rarely do Windows apps update that in memory variable once it is set.

Verify it is Installed!

  1. Open CMD or PowerShell (use PowerShell it's been put off long enough.)
  2. At prompt, type npm -v followed by return.
  3. Then node -v followed by return.
  4. Make sure they return the versions you just installed.
    PS C:\Users\titan> node -v
    v9.2.0
    PS C:\Users\titan> npm -v
    5.5.1
    PS C:\Users\titan>
DevOps Note:
NPM stands for Node Package Manager.
Azure Web App user? Don't panic, it's already installed in you Azure Web App host by default. This is only for local debugging so there is really nothing more you need to do other than configure your solution now.

Add the NuGets!

  1. Add Microsoft.AspNetCore.All (I went with v2.0.3.)
  2. Add Microsoft.AspNetCore.NodeServices (I went with v2.0.3)
DevOps Note:
I personally just recommend Add Microsoft.AspNetCore.All for an all in one simple package.
Go to this guide NetCore.App Update Blocked?! if you are having trouble with bumping old projects, or even new projects to the latest version of the 2.x.x SDK. It's really an easy fix.

Instruct AspNetCore Startup To Use NodeServices!

  1. One line changes are the best changes in Startup.cs
  2. Line to add is this one 'services.AddNodeService();' inside ConfigureServices
public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddNodeServices();
}
DevOps Note:
Does anyone not love how easy it is to add middleware or dependency injection in NetCore?

Add Some MVC Controller Routes!

  1. Two simple examples below.
  2. Example one is straight from Microsoft, returns nothing but a string to the browser.
  3. Example two shows how one could return it MVC style inside a View by using ViewData.
  4. Demonstrates how to resolve a service from the ether during the endpoint call.
  5. INodeServices actually supports more than Node.js - just a tip.
    [Route("sandbox/nodejs")]
    public class NodeJSController : Controller
    {
        [HttpGet]
        public IActionResult NodeJS()
        { return View(); }

        [HttpGet("original-add")]
        public async Task
        OriginalAdd([FromServices]INodeServices nodeServices)
        {
            var result = await nodeServices.InvokeAsync("./node_modules/addNumbers", 10, 20);
            return Content("10 + 20 = " + result);
        }

        [HttpGet("add")]
        public async Task
        Add([FromServices]INodeServices nodeServices)
        {
            var num1 = 10;
            var num2 = 20;
            var result = await nodeServices.InvokeAsync("./node_modules/addNumbers", num1, num2);
            ViewData["Result"] = $"Result of {num1} + {num2} is {result}";
            return View();
        }
     }

Create the addNumbers.js Node Module!

  1. I placed my Node modules into a root folder called node_models (Portal/node_modules)
  2. Filepath used in the code above is './node_modules/addNumbers.js'
  3. This folder had to be created.
Solution Structure:


Contents of addNumbers.js
module.exports = function (callback, first, second) {
    var result = first + second;
    callback(/* error */ null, result);
};

At this point, now is a good time to give a go and fire up the Debug and clickity clicky. Here is a sample of the NodeJS Sandbox page should you be interested to see how it simply wires up as an MVC Action through a Controller. Just put these in some hyperlinks and it should work as intended.

asp-area="" asp-controller="NodeJS" asp-action="OriginalAdd">Demo: Add 10 and 20!
asp-area="" asp-controller="NodeJS" asp-action="Add">Demo: Add 10 and 20 in a MVC View!

Sauces