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

One thought on “ASP.NET Core 2: New single page application templates

Leave a Reply

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