dotnet new angular and dotnet new react

I was exploring the "dotnet new" experience last week and how you can extend templates, then today the .NET WebDev blog posted about Steve Sanderson's work around Single Page Apps (SPA). Perfect timing!

Since I have Visual Studio 2017 RC and my .NET Core SDK tools are also RC4:

C:\Users\scott\Desktop\fancypants>dotnet --info

.NET Command Line Tools (1.0.0-rc4-004771)



Product Information:

 Version:            1.0.0-rc4-004771

 Commit SHA-1 hash:  4228198f0e



Runtime Environment:

 OS Name:     Windows

 OS Version:  10.0.15031

 OS Platform: Windows

 RID:         win10-x64

 Base Path:   C:\Program Files\dotnet\sdk\1.0.0-rc4-004771

I can then do this from the dotnet command line interface (CLI) and install the SPA templates:

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

The * is the package version so this is getting the latest templates from NuGet. I'm looking forward to using YOUR templates (docs are coming! These are fresh hot bits.)

This command adds new templates to dotnet new. You can see the expanded list here:

Templates                                     Short Name      Language      Tags

------------------------------------------------------------------------------------------

Console Application                           console         [C#], F#      Common/Console

Class library                                 classlib        [C#], F#      Common/Library

Unit Test Project                             mstest          [C#], F#      Test/MSTest

xUnit Test Project                            xunit           [C#], F#      Test/xUnit

Empty ASP.NET Core Web Application            web             [C#]          Web/Empty

MVC ASP.NET Core Web Application              mvc             [C#], F#      Web/MVC

MVC ASP.NET Core with Angular                 angular         [C#]          Web/MVC/SPA

MVC ASP.NET Core with Aurelia                 aurelia         [C#]          Web/MVC/SPA

MVC ASP.NET Core with Knockout.js             knockout        [C#]          Web/MVC/SPA

MVC ASP.NET Core with React.js                react           [C#]          Web/MVC/SPA

MVC ASP.NET Core with React.js and Redux      reactredux      [C#]          Web/MVC/SPA

Web API ASP.NET Core Web Application          webapi          [C#]          Web/WebAPI

Solution File                                 sln                           Solution

See there? Now I've got "dotnet new react" or "dotnet new angular" which is awesome. Now I just "npm install" and "dotnet restore" followed by a "dotnet run" and very quickly I have a great starter point for a SPA application written in ASP.NET Core 1.0 running on .NET Core 1.0. It even includes a dockerfile if I like.

From the template, to help you get started, they've also set up:

• Client-side navigation. For example, click Counter then Back to return here.
• Server-side prerendering. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over. THIS IS HUGE.
• Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
• Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.
• Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.

Go and read about these new SPA templates in depth on the WebDev blog.

Sponsor: Big thanks to Raygun! Join 40,000+ developers who monitor their apps with Raygun. Understand the root cause of errors, crashes and performance issues in your software applications. Installs in minutes, try it today!