Scott Hanselman

dotnet new angular and dotnet new react

February 13, '17 Comments [31] 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
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Wednesday, 15 February 2017 07:03:32 UTC
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.
Wednesday, 15 February 2017 08:15:54 UTC
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 :)
Stephen Jones
Wednesday, 15 February 2017 08:39:59 UTC
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!
Stephen Donaghy
Wednesday, 15 February 2017 08:50:01 UTC

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!
Wednesday, 15 February 2017 10:27:19 UTC
this is so cool Scott!
Jojo Aquino
Wednesday, 15 February 2017 12:44:52 UTC
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
Wednesday, 15 February 2017 13:09:41 UTC
Please add vuejs to the template, it is such a great library...
Stefano
Wednesday, 15 February 2017 13:19:39 UTC
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?
Jamie
Wednesday, 15 February 2017 13:51:46 UTC
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
Wednesday, 15 February 2017 14:02:47 UTC
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.
Maciej Lelito
Wednesday, 15 February 2017 17:51:20 UTC
It would be great if we have a template for Polymer as well

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

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
Wednesday, 15 February 2017 20:52:41 UTC
test
Scott Hanselman
Wednesday, 15 February 2017 21:09:31 UTC
Interesting, have to play around as soon as possible.
Wednesday, 15 February 2017 22:15:58 UTC
Scott, I have been struggling to get any SPA templates to work on a ASP CORE service in Azure Service Fabric. Any ideas?
David
Wednesday, 15 February 2017 22:39:44 UTC
Do you know what the prerequisite OS is?
James
Wednesday, 15 February 2017 23:33:28 UTC
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? :-)
Ofer Gal
Thursday, 16 February 2017 11:37:02 UTC
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 ;)
Giedrius
Thursday, 16 February 2017 12:49:55 UTC
Needs more command line. 1/10
How low can you sink.
Dissapointed Developer
Thursday, 16 February 2017 16:11:56 UTC
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?
MarkF
Friday, 17 February 2017 05:08:47 UTC
I was a little bit sceptical at how easy it would be to extend dotnet new
Friday, 17 February 2017 10:02:12 UTC
good the data transfer completely or making the most effective use of it.I presume points are taking place lastly and also currently you do not require to rely on any type of great.
Friday, 17 February 2017 19:06:56 UTC
Hi, about aot compiler?
Igor Moreira
Friday, 17 February 2017 19:39:25 UTC
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
Brian Behm
Friday, 17 February 2017 20:51:33 UTC
I must be doing something odd. Thank you
Friday, 17 February 2017 20:51:57 UTC
very nice Thanks
Friday, 17 February 2017 20:52:23 UTC
That's great timing,
Saturday, 18 February 2017 04:10:16 UTC
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.
Eric
Saturday, 18 February 2017 11:47:57 UTC
Cool stuff! (BTW, there's a typo in the post title. It should of course be dotnet new aurelia, not angular.) ;-)
David A. Sjøen
Monday, 20 February 2017 15:04:19 UTC
Very very nice!!! Thanks Scott!
Monday, 20 February 2017 21:41:31 UTC
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.
Name
E-mail (will show your gravatar icon)
Home page
 
Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Live Comment Preview

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