BT

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

| by David Iffland Follow 4 Followers on Feb 24, 2017. Estimated reading time: 2 minutes |

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

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Why is this good? by Michael Larionov

Why cannot they just create starter kits like everybody else?

Re: Why is this good? by Joe Justesen

Those were my thoughts reading this...

"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"

Why not reduce the complication/magic and just use nodejs from the start.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

2 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT