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.

Manifoldjs, a tool to create hosted apps

Modern web technologies are evolving not only to create faster and complex websites but also to create apps. There are plenty of examples for this. First of all, node.js, which is the one of the best examples, moving JavaScript to the server side. Then, you have electron, which is the technology behind Visual Studio Code, atom, the slack client and kitematic. Furthermore, you can think of frameworks that enables to create mobile apps using web technologies like apache cordova, ionic and React Native. However, you can go a step further creating a website and apps all in one using Manifoldjs.

Manifoldjs creates hosted web apps and some polyfill apps for Android, iOS, Windows 8.1, Windows Phone 8.1, Windows 10, FirefoxOS, Chrome, and the web, all based on the W3C Manifest for Web Apps. In addition to these platforms, the new version of manifoldjs supports creating your own platforms.

manifoldjs

So, what is a “Hosted Web App”? It’s a store app (i.e. apps that can be downloaded from Google Play or Windows Store), whose content is hosted on a web server. In other words, it’s a website converted into an installable app. You can find more information about hosted web apps in this post.

A W3C Manifest for web apps is a standardized JSON-based manifest that provides developers a centralized place to put metadata associated with a web application. With this manifest, you can forget about using all the platform-specific meta tags that set the different size icons for each platform and other settings. In order to support this manifest on your site, you just need to add a single <link> tag:

<link rel="manifest" href="manifest.json">

An example of a manifest.json could be something like:

{
    "name": "manifold.js",
    "short_name": "mjs",
    "icons": [{
        "src": "images/tiny.png",
        "sizes": "70x70",
        "type": "image/png"
    }],
    "start_url": "/",
    "scope":"http://www.manifoldjs.com/*"
    "display": "standalone",
    "orientation": "landscape"
}

If you want to generate a manifest.json for your site, there are several sites that can help you, for example, you can use the manifoldjs generator site or this one.

Of course, like most cool new features on the block, not every browser supports it yet. However, you can use the ManUp.js polyfill, for example, which will create the required meta tags on your site based on the manifest.json file. You can find more information about W3C Manifest and ManUp.js in this post.

Manifoldjs provides three ways to create your apps:

  • A node-based command-line interface (CLI) which you can install with npm and is easy to use.
  • A node.js module interface, which you can use to create your own tool just by adding the module as a common npm dependency in your node.js app.
  • A website that generates the apps for you: http://www.manifoldjs.com/generator

I will try to explain each scenario in more detail in future posts, but for now, the website is the easiest option.

To sum up, with your site, a W3C Manifest JSON file and manifoldjs, you can easily leverage your site in a cool way, creating Store apps for today’s most important platforms.