How JavaScript Services Can Help You To Build SPAs (Single Page Applications)

Single-Page Applications (SPAs) are web applications that load just a single HTML page and dynamically update the page as the user interacts with the app. SPAs use many new technologies to render fluid and responsive Web apps, without numerous page reloads. But this requires much of the work to happen on the client-side in JavaScript. SPA has some noted benefits: applications are more fluid and responsive, without the incongruous effect of reloading and re-rendering the page, performance improvement, ease of navigation and enhanced web page governance.

You could gain from building a Single-Page Application, if performance and load time are critical requirements for your project. Many organizations hire professional dot net developers to build their SPAs. And developers often use frameworks like Angular or React to build their SPAs. While, these are robust frameworks and create a fine user experience, building these applications is quite complicated. It is a challenging task to integrate server-side and client-side code or even to select an efficient project setup in the first place.

ASP.NET Core is often the best choice as a server-side platform for these type of apps. Recently three new NuGet packages have been shipped that simplify the SPA development process with powerful, new features. These are collectively known as JavaScript Services :

i) Microsoft.AspNetCore.SpaTemplates plugs into dotnet new, offering project templates for Angular 2, Aurelia, Knockout, React, and React+Redux applications.

ii) Microsoft.AspNetCore.SpaServices is how SpaTemplates-produced projects work internally. This provides useful features for SPA applications, like server-side rendering for Angular and React applications, plus integration with Webpack build middleware.

iii) Microsoft.AspNetCore.NodeServices is how Spa Services functions internally. This is a low-level library that gives a quick and powerful way for ASP.NET Core applications to run arbitrary JavaScript code on the server.

Prerequisites Developers looking to work with these technologies will need to have installed the following:

i) .NET Core SDK 1.0 RC4 (or later) for Windows, Mac, or Linux
ii) Or, if you’re on Windows, you can install the latest Visual Studio 2017 RC, which includes JavaScript Services. Ensure that you have VS2017 build 26206 or later – because older versions won’t work.
iii) Node.js, version 6 or later

Create the project
You can get started by using the project templates made available in the new tool. These plug into the standard dotnet new command , and work on Windows, Mac, and Linux.
Install the Single Page Application (SPA) templates with the following command:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Once this is installed, you’ll see that dotnet new can produce projects based on Angular, Aurelia, Knockout, React, and Reactredux. Once you have done this, generate a new project by creating an empty directory for it to sit into, cd to that directory and then use dotnet new to create the project:

dotnet new angular

You can run your new project either via the command line or via Visual Studio (Windows only).

Option 1: Running via the Command Line
To execute your project via the command line, you must restore both .NET and NPM dependencies. Here’s how:

dotnet restorenpm install

Now you can specify an environment variable to inform ASP.NET to run in development mode:

Option 2: Running in Visual Studio 2017 RC
For Windows users who want to use Visual Studio 2017 RC, it is quite simple. You just need to open your newly- generated .csproj file in Visual Studio. This takes care of restoring the .NET and NPM dependencies (though it will likely take a few minutes).

Once dependences are restored, just refresh the app using Ctrl+F5 to launch the application in a browser as usual.

Creating the SPA project via Yeoman Alternatively you can also use Yeoman to create your new project. The requirements are .NET Core SDK 1.1 and Node.js version 6 or later. Install Yeoman and the aforementioned template using command prompt:

npm install -g yo generator-aspnetcore-spa

Now cd to an empty directory where you want your project to be located, and then run Yeoman:

yo aspnetcore-spa

As soon as your new project is created, Yeoman will fetch its .NET and NPM dependencies by default. You can then set the ASPNETCORE_ENVIRONMENT variable and run your project using dotnet run. Your new Single-Page Application project is thus ready.

Publish You can deploy your application to production, using the publish feature which is built into dotnet command line tooling and Visual Studio.

There are great expectations from these new features to enable developers to build sophisticated, modern and fast web applications that combine the features of .NET and JavaScript code. Have you used JavaScript Services or Spa Services so far? Please share your experience or views in the comments section.