ASP.NET Core and Node together: JavaScript Services

by DotNetNerd 6. January 2017 10:08

A while ago I heard about some JavaScript Services that Steve Sanderson was working on for .NET core. The central idea was to provide services that could use NodeJS within an ASP.NET application, allowing us to consume all the awesome modules that are written for node. This can allow us to do a number of things, like prerendering and better integration between client and server that can run the same code.

Recently I ran into a new article about the work they are doing on JavaScript Services, and it seems to be far enough along now, that I think it is really worth trying out.
The documentation is really well written, so I won't write step by step instructions, but simply point out that it can be found on github and that it is pretty easy to get going.

NodeServices allows you to run a Node module from ASP.NET Core, and I was pleasantly surprised that all it takes is a nuget package and adding the service to DI - easy peasy, and it opens up a ton of interop possiblilties, allowing us to use cool Node modules, or share code.

SpaServices are a little more involved, but at its simplest it provides us with the ability to do PreRendering using TagHelpers to point to the module that we wish to render like this. 

<div asp-prerender-module="main-server" asp-prerender-data="new { UserType = 'CEO' }"></div>

The documentation also recommends using WebPack, which is the current defacto standard for transpiling and bundeling, and the SpaServices integrate with WebPack to provide hotswapping of modules, to give us a more smooth developer experience. With this we get a much nicer experience when using TypeScript, LESS and those types of technologies, and the configuration is fairly simple - even though there are a few rough edges around compatibility between different versions of Node and the modules involved. To support the tag above a simple module in TypeScript for rendering a bit of HTML could look like this, with the added twist of also returning data in the form of a list of companyids, that become available through window.companies.

import { createServerRenderer } from 'aspnet-prerendering';

export default createServerRenderer(params => {
    return new Promise((resolve, reject) => {
        const result = `
            <h1>My awesome headline!</h1>
            <p>Node time is: ${ new Date()}</p>
            <p>Request path: ${ params.location.path}</p>
            <p>Absolute URL: ${ params.absoluteUrl}</p>
            <p>Data: ${params.data.userType}</p>`
               
        resolve({
            html: result, globals: {
                companies: [1, 2, 3]
            }
        });
    });
});

For those who are into React, Augular or Knockout, JavaScript Services also includes specialized functionality for effecielt rendering and caching. 

All in all I think it is looking really interesting. Even though it is still early days, the potential for a better developer experience is obvious, and as a ASP.NET Core and NodeJS guy, I am thrilled to get better tooling built into ASP.NET Core.

Who am I?

My name is Christian Holm Diget, and I work as an independent consultant, in Denmark, where I write code, give advice on architecture and help with training. On the side I get to do a bit of speaking and help with miscellaneous community events.

Some of my primary focus areas are code quality, programming languages and using new technologies to provide value.

Microsoft Certified Professional Developer

Microsoft Most Valuable Professional

Month List