ASP.NET Core 2: New single page application templates

With ASP.NET Core 2.0 Preview 2 there are new web application templates available for Single Page Applications (SPA). Currently Angular, React.js and React.js + Redux are supported. This blog post gives short overview of new templates and related sample application.

New SPA templates

When creating new ASP.NET Core application using Visual Studio 2017 Preview 3 there are now three new templates available for SPA-s as shown on screenshot below.

ASP.NET Core 2: New single-page application templates

These three templates create actually the same sample application but the difference is in JavaScript libraries. Notice that these new templates are available only when ASP.NET Core 2 is selected from framework dropdown on top of dialog.

TypeScript and webpack

ASP.NET Core 2: ClientApp folder and webpack configurationFor SPA-s there is now ClientApp folder where JavaScript framework components are held. As you can see from screenshot on right templates use TypeScript by default. Project shown in solution explorer uses React.js based template.

Another new thing is support for webpack module bundler. Webpack is added to project as Node.js module. It is not related to Task Runner. Webpack is run as part of build. It takes care of bundling and minification too.

Webpack publishes bundled and minified files to wwwroot\dist folder when application is built. JavaScript libraries are bundled to file wwwroot\dist\vendor.js and styles that come with these libraries are bundled to wwwroot\dist\vendor.css file. Both files are automatically minified too.

webpack.config.js is configuration file for webpack and this is the place where all bundling and minifying rules are defined. You can add your own rules there.

Sample application

SPA sample application demonstrates simple counter and weather forecast page. Counter page uses only JavaScript and forecast page uses server call to load weather forecasts. There is SampleDataController where sample data is generated.

ASP.NET Core 2: Sample single page application

Wrapping up

New SPA templates are simple but powerful as most of work on including scripts and adding components is already done and it makes it easy to start building your own application. Developers writing SPA-s on ASP.NET Core should get familiar with webpack now but it is worth it as it is also one of most popular bundling tools in JavaScript world. I hope there will be more templates available in the future to cover also other popular JavaScript frameworks.

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    14 thoughts on “ASP.NET Core 2: New single page application templates

    • Pingback:Tech Updates - Fokoya

    • September 2, 2017 at 5:41 pm

      Can you please tell how to generate dist folder when using core angular template.

    • September 19, 2017 at 7:43 pm

      please, see the Preview: (how i turn Contoso app into Single Page App within 2 minutes). i hope, you will share this creative work when you finish seeing the course Preview(only 9 minutes). And you will be so pleased. Let’s make developer’s life lot easy..

    • September 21, 2017 at 5:16 pm

      The same old story all over again: these templates produce javascript error on all new default unmodified setup out of box:

      SCRIPT438: Object doesn’t support property or method ‘assign’
      main-client.js (7925, 5)

      This is when new application is setup by selecting specifically React with Redux template, after restoring all npm and nugget packages, just running the auto-generated application in IE11 browser. This was happening with old Core 1.x templates, and it is still unaddressed and broken in .NET Core 2.0 too.

      Here is where the javascript is being thrown:

      function buildRootReducer(allReducers: ReducersMapObject) {
      return combineReducers(Object.assign({}, allReducers, { routing: routerReducer }));

      As I said: no any code modification was done after brand new application is auto-generated by this template.

    • September 21, 2017 at 5:25 pm

      Just to add to the above post, the above mentioned broken javascript in IE11 prevents “Increment” button work on “Counter” page. Clicking this button on “Counter” auto-generated page in IE11 does nothing, no count increment happens because javascript threw exception and therefore all javascript at this point is dead. SPA is primarily javascript, therefore the error makes this whole setup unusable.

    • September 21, 2017 at 7:25 pm

      Thanks for feedback, Sergey! I will communicate this to product group.

    • September 23, 2017 at 11:48 pm


      Thanks for the article, I’m having problems getting started and been searching for a while. Basically I want to get rid of the default index page and add my own html with my custom CSS and JS.

      First I don’t know where to put my custom CSS and JS in which folder exactly? Also the html template I use using some 3rd party libraries such as Ace, Beautify, BlockUI, Pace, etc…

      Appreciate any help.

    • September 26, 2017 at 7:18 pm

      Thank you Gunnar: this is exactly what I needed. Now it works great, no issues. Good work indeed. Please give best wishes to the team and special thanks for great article. This was very helpful. I am surprised IE11 is considered “deprecated” since this is still very highly used browser around the world, and especially so within organizations internally, where IE11 very often is the only officially supported and allowed browser. But your posted article mentioned helps address the issue.

    • September 26, 2017 at 8:36 pm

      Well, new web applications are often built with no legacy tech in mind and this is the trend. Without polyfill the script package smaller and I think there will be perhaps the option in the future to select if you want polyfill or not in your SPA package. IMHO IE11 must be supported until it has strong position in browser market. So, let’s see.

    • February 20, 2018 at 1:49 pm

      Very helpful and Great information,
      I appreciate advise especially coming from a professional.
      Thanks again and keep up the great work!

    • May 15, 2018 at 3:11 pm

      Great information. It would be nice to provide CRUD operations too.

    Leave a Reply

    Your email address will not be published. Required fields are marked *