Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

ASP.NET Core 2: New SPA Templates

DZone's Guide to

ASP.NET Core 2: New SPA Templates

ASP.NET Core 2.0 Preview 2 includes some new web app templates to create SPAs, as well as updates the languages that supported in their creation. We take a look.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 a short overview of new templates and related sample applications.

New SPA Templates

When creating a new ASP.NET Core application using Visual Studio 2017 Preview 3, there are now three new templates available for SPAs as shown in the screenshot below.

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

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

TypeScript and Webpack

ASP.NET Core 2: ClientApp folder and webpack configurationFor SPAs, there is now a ClientApp folder where JavaScript framework components are held. As you can see from the screenshot above, the templates use TypeScript by default. The project shown in the solution explorer uses a React.js-based template.

Another new thing that's been added is support for the Webpack module bundler. Webpack is added to a project as a Node.js module. It is not related to Task Runner. Webpack is run as part of the build. It takes care of bundling and minification, too.

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

webpack.config.js is the 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

The SPA sample application below demonstrates a simple counter and weather forecast page. The counter page uses only JavaScript and the forecast page uses a 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 the work for including scripts and adding components is already done and it makes it easy to start building your own application. Developers writing SPAs 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 the JavaScript world. I hope there will be more templates available in the future to cover other popular JavaScript frameworks.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
asp.net core ,spa ,web dev ,angular ,react.js

Published at DZone with permission of Gunnar Peipman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}