What's new in ASP.NET Core 3.0 for React SPAs?
Tags: dotnet, react
Published: 2019-09-12 16:41:12

---
title: What's new in ASP.NET Core 3.0 for React SPAs?
published: true
description: The release of ASP,NET Core 3.0 is right around the corner. What are the new features that React SPAs can take advantage of? Let's find out ...
tags: #dotnet #react
---

The release of ASP,NET Core 3.0 is right around the corner. What are the new features that React SPAs can take advantage of? Let's find out ...

## MVC service registration

There are some new extension methods for adding the MVC related services in the `ConfigureServices` method in `Startup` class. `AddMvc` will continue to work as usual adding all the MVC related services. However we now have `AddControllers`, `AddControllersWithViews` and `AddRazorPages` which add services for more specific scenarios:

* `AddControllers`. This can be used when the app is purely a web API and doesn't need any server side views or Razor pages

{% gist https://gist.github.com/carlrip/7b36ffec668bf1ba7b118fafa4470904 %}

* `AddControllersWithViews`. This can be used when the app is a web API some some server side views
* `AddRazorPages`. This can be used when the app uses Razor pages. Note that `AddControllers` or `AddControllersWithViews` will need to be called as well in order to get the web API features

## Endpoint routing

Endpoint routing separates the process of matching which endpoint will execute from the actual running of that endpoint. This allows route information to be available earlier in the HTTP request processing pipeline.

To create endpoints for all our API controllers in ASP.NET Core 3.0 we replace `app.UseMvc` with `app.UseEndpoints`:

{% gist https://gist.github.com/carlrip/c0dedc96cd9a468262fcbc3ae7945fba %}

For more information on endpoint routing see [this great post](https://aregcode.com/blog/2019/dotnetcore-understanding-aspnet-endpoint-routing/) from Areg Sarkissian.

## Built-in JSON support

ASP.NET Core no longer relies on [Json.NET](https://www.newtonsoft.com/json) to serialize and deserialize JSON. A `JsonSerializer` class has been added in the `System.Text.Json` namespace containing `Serialize` and `Deserialize` methods. Internally ASP.NET Core uses this in the model binding process. If our web API needs to call other web APIs we can use this to deserialize the response

{% gist https://gist.github.com/carlrip/67db450e42b284d53645485341b2c5dd %}

##C # 8

C# is packed with useful features including **nullable reference** types. We need to enable nullable reference types in our project file as follows:

{% gist https://gist.github.com/carlrip/4a5526b4aa30ee4e1bd698647060da9c %}

Reference types are then not nullable by default. Visual Studio will then warn us when a null reference exception may occur in our code:

![Null exception warning](https://www.carlrippon.com/wp-content/uploads/2019/09/nullable-reference-types-768x194.png)

**Switch expressions** are cool as well. These are ideal for mapping code, saving us some valuable key strokes:

{% gist https://gist.github.com/carlrip/2044f306f79d452456335b9ae388852a %} 

[Checkout the docs](https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-8) to learn about the other C# 8 features.

## SPA template can include authentication and authorisation

When using the SPA template to create a new project, the option to include authentication is now available:

![SPA template authentication](https://www.carlrippon.com/wp-content/uploads/2019/09/spa-with-auth.png)

The example web API controller implements a protected endpoint using the `Authorize` attribute:

{% gist https://gist.github.com/carlrip/b9587ce2ba47490ec518f55cab2f2b41 %}

Notice also that the example web API controller now inherits from `ControllerBase` and is decorated with the `ApiController` attribute. Using `ControllerBase` means that the class doesn't contain unnecessary stuff for handling server side views. The `ApiController` attribute means that invalid request models will return HTTP status code 400 (bad request) without us having to do any work in action methods.

The React client uses a `AuthorizeService` class to encapsulate the interaction with the identity server. This is a nice wrapper around the `oidc-client` npm package.

The React client also contains `AuthorizeRoute` component so that authorized paths can easily be implemented:

{% gist https://gist.github.com/carlrip/3124276bd2793b2297a874ab7d6fff53 %} 

If an unauthenticated user accesses a protected route, they will be redirected to the identity server to authenticate. Neat!

## Create React App 3.x

The version of Create React App that the SPA template uses has been bumped from v1 to v3. Don't get too excited though, the React version is still very old and pre hooks. TypeScript is also listed as a dependency but the project doesn't appear to use it.

{% gist https://gist.github.com/carlrip/aa893e96bc93d6e8d943329cc0eb5458 %} 

## SignalR endpoints and automatic reconnect

Like web API endpoints, SignalR endpoints can use the new endpoint routing:

{% gist https://gist.github.com/carlrip/70c2f2ac6c748398e525eebe90accb5a %} 

In the React client, when establishing the SignalR connection, we can tell it to automatically reconnect when a connection is lost:

{% gist https://gist.github.com/carlrip/67d40f44d8bb0a9bc86fa0a542cb073c %} 

*Originally published at [https://www.carlrippon.com/whats-new-in-asp-net-core-3-0-for-react-spas](https://www.carlrippon.com/whats-new-in-asp-net-core-3-0-for-react-spas/) on September 10, 2019.*