JavascriptServices: ASP.NET Core meets node.js

JavascriptServices In the past, I talked about how to integrate Angular 2 and ASP.NET Core just by using gulp tasks and configuring ASP.NET Core. In one of those post, I used the Microsoft.AspNet.SpaServices NuGet package to create a fallback route. This package is part of a set of tools named JavascriptServices which provides infrastructure that helps you to create awesome React/Angular 2/Knockout/etc sites, as well as, integrate with existing node.js code into your ASP.NET Core apps.

Introducing JavascriptServices

JavascriptServices is a set of tools that currently includes three components/NuGets: Microsoft.AspNetCore.NodeServices, Microsoft.AspNetCore.SpaServices and Microsoft.AspNetCore.AngularServices. In the past, there was also a ReactServices package, but this package is no more needed as you can use the SpaServices package instead. Now, let’s see them in more detail.

NodeServices

First, NodeServices, which is the base package. This package provides a way to run JavaScript in the server from a .NET application. To do this, it takes advantage of the Node.js environment.

In order to consume NodeServices, you need to add the using Microsoft.AspNetCore.NodeServices; statement and enable it inside the ConfigureServices method of your Startup class.

public void ConfigureServices(IServiceCollection services)
{
    // ... all your existing configuration is here ...

    // Enable Node Services
    services.AddNodeServices();
}

Now, you can use this service from any action by adding the nodeServices parameter to it and calling the nodeServices’ InvokeAsync method. Just pass the name of the node.js script file as first parameter and then the JavaScript function’s parameters if you need to.

public async Task<IActionResult> MyAction([FromServices] INodeServices nodeServices)
{
    var result = await nodeServices.InvokeAsync<int>("./addNumbers", 1, 2);
    return Content("1 + 2 = " + result);
}

In this example, the addNumbers.js script should be placed at the root of your ASP.NET Core app and look something like the following. Note that function should have a callback parameter in the first position which expect and error and the result. As a result of this, you might want to wrap your existing code in a new script that calls it.

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

For more details on the API, you can check the repository, which also includes some extra use cases and samples.

SpaServices

The second package is SpaServices, which is built on top of NodeServices. This package includes a lot of tools that are generally useful when building Single Page Applications (SPAs). I already mentioned the routing helpers (the MapSpaFallbackRoute extension method).

One of the most interesting tools included in the SpaServices package is the Webpack middleware. This middleware enables you to hook your webpack configuration in ASP.NET Core in a similar way as you can do with express in node.js.

Another interesting feature included in SpaServices, is the support for hot module replacement. By using this feature, you can reduce the amount of time reloading the page after changes which is very useful for big SPAs.

Lastly, you can create universal (a.k.a. isomorphic) applications thanks for the support for server-side rendering. This is especially interesting for improving SEO (Search engine optimization) and client-side performance.

As this package is a bit more complex than the previous one, I will try to create a new post in the near future to show how to configure Angular 2 and/or React using it. In the meantime, you can read the documentation and the samples at the repository.

AngularServices

The last package is AngularServices, which provides some extra tools for Angular including some validation helpers and a “cache priming” feature.

The yeoman generator

Finally, there is a yeoman generator called generator-aspnetcore-spa which includes templates using these packages configured with Angular 2, React, React + Redux and Knockout.

JavascriptServices: generator-aspnetcore-spa

Wrapping up

To wrap up, these are a great set of tools if you plan to create SPA sites using the latest frameworks. Moreover, this is just the beginning for these tools as they are in heavy development.

  • Pingback: Notes from the ASP.NET Community Standup – August 30, 2016 | .NET Web Development and Tools Blog()

  • Very interesting! Is there a need or use for an Aurelia service as well? Is that on the agenda? Thanks!

    • Honestly, I don’t know. However, you can use most of the services in any front end framework, specially if you can configure them with webpack.

  • Ababac Bacacab

    It is interesting, but it would be good to give an overview how it works, how types conversion happen, how many NodeJS instances is created and how they work in multithreaded environments.

    And the main – it probably not the best way to develop services – to wrap NodeJS code with ASP.Net Core. Why at all would you need that?

    List of scenarios for this is pretty limited, it is not for generic REST Services development.

    • The great think about being an open source project is that you can check about it and share your thoughts using issues and PRs.

      Regarding why would you need something like that. You can find a lot of useful scenarios here, a few examples:
      – Technology migration: you have a node.js app and you want to use asp.net core, but you have a lot of logic already build. You can just call that existing code from your actions
      – Tooling not available in C#/Multiplatform development: this is an specially good scenario when you are using .net core instead of the full framework, as there are a lot of libraries/frameworks that are not yet available. Additionally, if you want something targeting multiple platforms (e.g. you are deploying to a docker container running on docker and developing on windows). There are a lot of useful frameworks and tools created in node.js, for example “webpack”
      – You need to execute a dynamic and untyped code.

      I don’t think that this is limited, specially if you know the power of webpack and you work with the latest technologies, this is very cool. And, no, this is not generic for REST services, that’s not the focus at all, I don’t know where you read that :/. As any tool, there are no silver bullets, this is great for a number of scenarios and you don’t need to use it every time 🙂

  • Very Interesting Blog.

  • iwebworld info

    this blog providing good information To learn NodeJS visit http://iwebworld.info contact: [email protected]