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.



See also

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

  • […] have new project templates for SPA using react, angular, react+redux for .net core 2: http://gunnarpeipman.com/2017/07/aspnet-core2-spa/ we are […]

  • Nirav Solanki says:

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

  • toufiq says:

    please, see the Preview: https://www.udemy.com/toufiqelahy/ (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..

  • Sergey says:

    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.

  • Sergey says:

    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.

  • Gunnar says:

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

  • Gunnar says:

    Sergey, IE11 is not currently supported OOB as it is sort of deprecated but you can add polyfill and make it work. By default, right now, there’s no polyfill in SPA templates but it may come with next version.

    Until this please check the guidance here: https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11-(or-older)

Leave a Reply

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