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 ...
There are some new extension methods for adding the MVC related services in the
ConfigureServices method in
AddMvc will continue to work as usual adding all the MVC related services. However we now have
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
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
AddControllersWithViewswill need to be called as well in order to get the web API features
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
For more information on endpoint routing see this great post from Areg Sarkissian.
ASP.NET Core no longer relies on Json.NET to serialize and deserialize JSON. A
JsonSerializer class has been added in the
System.Text.Json namespace containing
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
C# is packed with useful features including nullable reference types. We need to enable nullable reference types in our project file as follows:
Reference types are then not nullable by default. Visual Studio will then warn us when a null reference exception may occur in our code:
Switch expressions are cool as well. These are ideal for mapping code, saving us some valuable key strokes:
Checkout the docs to learn about the other C# 8 features.
When using the SPA template to create a new project, the option to include authentication is now available:
The example web API controller implements a protected endpoint using the
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:
If an unauthenticated user accesses a protected route, they will be redirected to the identity server to authenticate. Neat!
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.
Like web API endpoints, SignalR endpoints can use the new endpoint routing:
In the React client, when establishing the SignalR connection, we can tell it to automatically reconnect when a connection is lost:
Originally published at https://www.carlrippon.com/whats-new-in-asp-net-core-3-0-for-react-spas on September 10, 2019.