Scott Hanselman

dotnet new angular and dotnet new react

February 13, 2017 Comment on this post [30] Posted in Javascript | Open Source | VS2017
Sponsored By

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!

image

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!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
February 15, 2017 7:03
Very nice.
Right now command line produces "better code" than VS tooling and this is something the team needs to look into. I don't mind using command line, it's just that I expect VS to produce the same output. From memory, even the yeoman Dot Net Core scaffolder does a better job than dotnet new.
February 15, 2017 8:15
That's great timing, I've been working (read fighting) with Visual Studio & .Net Core to try and do an Angular app and ened up getting nowhere (resorted to using Notepad++ and not using Core). Will have to give this a try when I get home tonight :)
February 15, 2017 8:39
Oh wow, that's fantastic. I was a little bit sceptical at how easy it would be to extend dotnet new, but that proves it's a cinch.

I can't wait to play with some of these templates!
February 15, 2017 8:50

Thanks for the great tip. I have been using the Yeoman generator to scaffold these projects. I had no idea we could install them into the dotnet scaffolder. That is really cool, will be trying this out shortly!
February 15, 2017 10:27
this is so cool Scott!
February 15, 2017 12:44
Running
dotnet new –install Microsoft.AspNetCore.SpaTemplates::*
on MacOS Sierra I get:

Installing System.Text.Encoding 4.0.11.
Installing System.Text.Encoding.Extensions 4.0.11.
Installing System.Text.RegularExpressions 4.1.0.
Installing System.Threading.Tasks 4.0.11.
/usr/local/share/dotnet/sdk/1.0.0-rc4-004823/NuGet.targets(97,5): error : Too many open files [/Users/Jon/.templateengine/dotnetcli/v1.0.0-rc4-004823/scratch/restore.csproj

I can't get around it - after jumping through so many hoops to actually update OpenSSL for .Net Core on MacOS I have hit another roadblock. I love all this new stuff, just a shame the 'Getting Started' process isn't smoother yet, but looking forward to when it is :)
Jon
February 15, 2017 13:09
Please add vuejs to the template, it is such a great library...
February 15, 2017 13:19
This is excellent,

Just tried it and i'm getting the following exception when running:
An unhandled exception has occurred: Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module "./app/app.module"


Anyone have any idea about this?
February 15, 2017 13:51
Ok, so an update... if I use the Terminal in VS Code it all installs fine :D But just not the system terminal... I must be doing something odd...
Jon
February 15, 2017 14:02
Yeah, I am using yeoman for generating that stuff,
and now it also supports Aurelia so it's very cool.
And you can choose between es6/ts and css transpilers.
February 15, 2017 17:51
It would be great if we have a template for Polymer as well

https://www.polymer-project.org/1.0/
February 15, 2017 17:51

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


Scott, how do we see this list? I feel that I hack around trying to identify what templates are available.
x
February 15, 2017 22:15
Scott, I have been struggling to get any SPA templates to work on a ASP CORE service in Azure Service Fabric. Any ideas?
February 15, 2017 22:39
Do you know what the prerequisite OS is?
February 15, 2017 23:33
Everything went well until I opened Visual Studio 2017 RC :-)

Now VS is asking me to change to the 4.6.1 or download V2.0
I thought it was .NET Core1.0

Why all this versioning stuff get in the way of having fun? :-)
February 16, 2017 11:37
dotnet new -help does not show install as an option, although it works :) Don't tell me, that now .net will be linux like - no documentation available or it is outdated always.
Also in https://www.microsoft.com/net/download/linux can't see new versions, was somehow hoping, that the page is not manually updated, but uses some CI output to be up to date ;)
February 16, 2017 12:49
Needs more command line. 1/10
How low can you sink.
February 16, 2017 16:11
I have been playing with .Net Core and Docker. Why is the Add>Docker Support disable on the MVCAngular SPA in Visual Studio 2017 RC? You should be able to run this in docker?
February 17, 2017 19:06
Hi, about aot compiler?
February 17, 2017 19:39
Is it possible to use Angular CLI once you generate a "dotnet new angular" site? It would be great to add components, services, etc. with the Angular CLI.


dotnet new angular
cd ClientApp
ng g component MyNewComponent
February 18, 2017 4:10
Why would I want TypeScript and Babel together? That seems like a bit overkill doesn't it? Lots of levels of abstraction. I'm not so sure about that, maybe there is a good reason I am missing.
February 18, 2017 11:47
Cool stuff! (BTW, there's a typo in the post title. It should of course be dotnet new aurelia, not angular.) ;-)
February 20, 2017 21:41
This post was a kicking off point for me to write the following post - How To Create A dotnet new Project Template In .NET Core.

The process is lacking some polish at the moment but that is to be expected with RC bits. That being said the direction they are heading in is very promising.
February 22, 2017 14:47
Cool stuff. Have a look at delta emulator. Delta emulator app is very popular to play all types of games on your ios device without jailbreaking. Install delta emulator beta download free on your ios device to get your favorite games with single multi-emulator.
February 23, 2017 1:26
Anyone with issues or sugguestions should go to https://github.com/aspnet/JavaScriptServices and add an issue there. Steve (and contributors) is doing a great job on this project.

@Eric - Typescript and Babel do different things. Babel allows you to use next gen javascript in current browsers and Typescript add static type checking etc.
February 24, 2017 14:51
This was an excellent example of a template in the new dotnet cli but it reminded me of a question I've had for a while. Why would anyone want to host an SPA application on top of ASP.NET Core or otherwise. Don't get me wrong, I really like .NET for server side stuff, I just can't see the point of hosting the content on top of Kestrel and a tiny bit of core? Someone want to 'splain that too me?
February 26, 2017 15:33
i wish aurelia.io was there too
February 26, 2017 15:34
oh i am so happy now i can see them ;)
February 27, 2017 19:09
Yeah,Its great to work on Angular JS and MVC Dot Net and to find an article like this makes life really happening.
March 09, 2017 12:12
How about using AdminLTE Tree menu. That would be very helpful for building a large application in terms of navigation.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.