Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Microsoft Makes it Easy to Create JavaScript Web Apps with New Tool

Microsoft Makes it Easy to Create JavaScript Web Apps with New Tool

This item in japanese

Microsoft has released a set of tools to quickly generate JavaScript-based web applications using their dotnet new tool and a clever way of using Node.js.

The dotnet new tool is part of the .NET Core Tools and is used to spin up a new project using a simple command line syntax. As part of the ASP.NET Core JavaScript Services, web developers can now spin up new template-based Single Page Applications (SPA) using the same command.

In an article, Steve Sanderson writes that the hope with these templates is to make it easier to get started:

We often hear that building these applications [SPA using Angular or React] is complicated. It can be a challenge to integrate server-side and client-side code well, or even just to choose a productive project setup in the first place.

The availability of these project types is dependent on a the Microsoft.AspNetCore.SpaTemplates NuGet package. Once that's installed, the templates for angular, react, reactredux, aurelia, and knockout are available to spin up using a command like this:

dotnet new reactredux

The source of these packaged templates are in GitHub. Since this is a .NET Core tool, the installation of one of these templates results in the creation of an ASP.NET app that serves up a client-side SPA. The "angular" is an Angular 2+ app, observing the "It's Just Angular nomenclature.

Elsewhere in the JavaScript community, options such as create-react-app and the Angular CLI have provided those familiar with Node.js and NPM an easy way to spin up those kinds of apps. The .NET based approach of dotnet new gives developers coming from a Microsoft environment an option they may be more familiar with. In some ways, however, these new .NET tools are more full featured by default.

The angular and reactredux templates, for example, include server-side prerendering by default (it can be turned off). All of these project types use Webpack 2 to bundle the front-end code up and, except for the aurelia template, Hot Module Replacement is on by default.

While this is a .NET app, it's still using Node.js via the use of SpaServices. SpaServices uses Microsoft.AspNetCore.NodeServices to allow ASP.NET developers to take advantage of the Node.js ecosystem without actually running Node.js directly. Sanderson says it's all happening "behind the scenes":

For example, to prerender Angular or React components on the server, it needs to execute your JavaScript on the server. It does this via NodeServices, which starts up a hidden Node.js instance and provides a fast and robust way of making calls into it from .NET.

Sanderson is also the creator of knockout.js.

Rate this Article