Using ASP.NET Core to Build Single-page Applications

This course will teach you how ASP.NET Core is one of the most productive, most flexible, and best performing cross-platform service-side web technology for hosting and building modern web applications.
Course info
Rating
(95)
Level
Beginner
Updated
Apr 12, 2017
Duration
1h 59m
Table of contents
Course Overview
Introduction
Getting Started
Streamlining the Dev Experience
Help with Routing
Server-side Prerendering
Efficient Production Builds
Deploying to Azure
Using NodeServices Directly
Description
Course info
Rating
(95)
Level
Beginner
Updated
Apr 12, 2017
Duration
1h 59m
Description

Learn to code faster, boost performance and SEO, and to use advanced client-side debugging features. In this course, Using ASP.NET Core to Build Single-page Applications, you'll learn how to leverage that power to get a streamlined development experience and build efficient production ready apps. First, you'll discover how to streamline the dev experience. Next, you'll explore server-side prerendering and how to create efficient production builds. Finally, you'll learn about continuous deployment. By the end of this course, you'll be able to scaffold an ASP.NET core web application fronting with your favorite spa framework.

About the author
About the author

Ajden has worked on everything from embedded devices to large-scale enterprise systems during his 10+ years in commercial software development. Since 2007, Ajden has focused on Microsoft technologies and, more recently, on web technologies. Ajden is also a speaker at conferences and has a passion for teaching.

More from the author
Angular Material
Beginner
3h 8m
Jan 5, 2018
AngularJS Material Fundamentals
Beginner
2h 46m
Feb 16, 2016
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Ajden Towfeek, and welcome to my course, Using ASP. NET Core to Build Single Page Applications. I'm an independent software consultant at Towfeek Solutions. I teach and speak to whoever will listen. I also code, blog, and record screen casts on the latest web technology. Make sure to follow me on YouTube and Twitter for updates. ASP. NET Core has set out the goal to be the most productive, most flexible, and best performing cross-platform server-side web technology for hosting modern web applications. In this course, we'll demonstrate how to seamlessly integrate your server-side code with your client-side code, regardless of which front-end technology you prefer. You'll learn to code faster, boost performance and CEO, use advanced client-side debugging features. Some of the major topics that we will cover include streamlining the dev experience, server-side prerendering, creating efficient production builds, and continuous deployment. By the end of this course, you'll be able to scaffold an ASP. NET Core application fronting with your favorite SPA Framework, develop your app in a streamlined environment, and continuously deploy to production. Before beginning this course, it would be preferable, but not essential to be familiar with ASP. NET Core. If you have not done so already, feel free to check out some of the many ASP. NET Core titles in the library. I hope you'll join me on this journey to learn why ASP. NET Core is the most productive platform for building single page applications with Using ASP. NET Core to Build Single Page Applications course here, at Pluralsight.

Introduction
Hi. I'm Ajden Towfeek, and this is Using ASP. NET Core to Build Single Page Applications. These days, many developers are building single page applications with frameworks such as Angular, Aurelia, or React. Building applications using these powerful frameworks aren't always trivial. It can be challenging to integrate server-side and client-side code or even choose a productive project setup. To help us with this, the ASP. NET Core team has created the JavaScript services, which we'll learn all about in this course. ASP. NET Core has set out a goal to be the most productive, most flexible, and best performing cross-platform server-side web technology for hosting and building modern web applications. This is a quote made by Steven Sanderson, our goal is to make ASP. NET Core the best server-side platform for these kind of projects, which I really think sounds really great because there really is a platter of frameworks and libraries out there and it's really hard to keep track of all of them and know what pros and cons goes with whatever technology you decide with.

Getting Started
In this Getting Started module, we will install all the dependencies required to get up and running with JavaScript services. The ASP. NET Core team has recently shipped free NuGet packages that are intended to simplify SPA development with ASP. NET Core. These are Microsoft. AspNetCore. SpaTemplates. This plugs into the. NET CLI by typing dotnet new. We'll see this in action in a bit. This package provides project templates for Angular, Aurelia, Knockout, React, and React plus Redux. The next package, SPA services is how SPA template-produced projects work internally. It provides useful features for SPA applications, such as server-side rendering for Angular and React applications, plus integration with webpack build middleware, which we're going to take a look at later on in this course. Node services is how SPA services work internally. It's a low-level library that gives a fast, robust way for ASP. NET Core applications to run arbitrary JavaScript code on the server. We'll see how we can render charts using JavaScript library on the server later on in this course. Collectively, these features go by the name JavaScript services. Enough talk. Now let's get started with setting up our dev environment, which we'll use throughout this course.

Streamlining the Dev Experience
In this module, we will see how to streamline the development experience by leveraging something called webpack dev middleware. The webpack dev middleware feature included in Microsoft ASP. NET SPA services will streamline your development process. It intercepts requests that would match files built by webpack and dynamically build those files on demand. They don't need to be written to disk. They're just held in memory and served directly through a browser. Some benefits using webpack dev middleware are you don't have to run webpack manually or set up any file watchers. The browser is always guaranteed to receive up-to-date build output. The build artifacts are normally served instantly or at least extremely quickly because, internally, an instance of webpack stays active and has partial compilation states pre-cached in memory. Now let's get up and running with streamlining our development experience.

Server-side Prerendering
Server-side Prerendering makes your application's initial UI appear much more quickly because users don't have to wait for their browser download, evaluate, and execute large JavaScript libraries before the application appears. Server-side prerendering are often associated with universal, or also known as isomorphic applications, which simply means that the code can run both on the server and the client, meaning that our Angular or React components are first rendered on the server and then transferred to the client where execution continues. So the primary use case for server-side prerendering is to make your page appear extremely quickly, even if the user has a slow network connection and even if your SPA code base is very large. This feature solves what is otherwise a significant drawback of large SPA frameworks. Taking a look at the SPA templates server-side prerendering configuration can be overwhelming. That's why, before we take a look at the Angular and React prerendering features, we're going to build up the server-side prerendering from an empty ASP. NET MVC application just to see how easy it is to get started with server-side prerendering. Since the SPA services package isn't tied to any particular client-side framework, it doesn't force you to set up your client-side application in any particular style, so SPA services doesn't contain hardcoded logic for rendering Angular or React components. So let's switch over to a command prompt and scaffold a new ASP. NET Core project.

Deploying to Azure
In this module, we will set up a simple continuous deployment pipeline to deploy our app from GitHub to Microsoft's cloud platform, Azure. And deploying to Azure is just one way of deploying. There are plenty of ways of deploying an application. You could just use an FTP client like FileZilla and upload the files, but I'm going to show you how easy it is to set up a continuous integration environment and deploy your code on each check in directly from GitHub. And we're going to do this in three simple steps. First, we're going to create a GitHub repo and upload our code. Then we're going to set up continuous integration, and for that, we're going to use Visual Studio team services, but there are other services out there. You could use TeamCity, for instance, or Jenkins, or whichever platform you prefer. And then, once again, we're going to use Visual Studio Team Services to deploy our application once we have a green build from the continuous integration pipeline. Now we're going to deploy it directly to an Azure website. So let's go ahead and set up our continuous delivery pipeline.

Using NodeServices Directly
So far, we have exclusively seen benefits with using AspnetCoreSpaServices when building single-page applications. In this module, we'll see how to execute JavaScript on the server from an MVC controller using NodeServices directly. Even if you're not building a single-page application, it can be extremely useful to be able to run JavaScript on the server in certain cases. So why would you want to do this? Primarily, because a huge number of useful, high-quality, web-related open source packages are in the form of Node Package Manager, NPM, modules. NPM is the largest repository of open source software packages in the world and the Microsoft ASP. NET NodeServices package means that it can use any one of them in your ASP. NET Core application. Now let's use NodeServices directly from our MVC controller.