DEV Community

Carl
Carl

Posted on

2 3

What's new in ASP.NET Core 3.0 for React SPAs?

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
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
}
view raw Startup.cs hosted with ❤ by GitHub
  • 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:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
view raw Startup.cs hosted with ❤ by GitHub

For more information on endpoint routing see this great post from Areg Sarkissian.

Built-in JSON support

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 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

var jsonContent = await response.Content.ReadAsStringAsync();
var user = JsonSerializer.Deserialize<User>(jsonContent, new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true
});

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:

<PropertyGroup>
...
<LangVersion>8.0</LangVersion>
<Nullable>enable</Nullable>
</PropertyGroup>
view raw App.csproj hosted with ❤ by GitHub

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

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

public static string GetLevel(int level) =>
level switch
{
1 => "low",
2 => "medium",
3 => "high",
_ => throw new ArgumentException("invalid level"),
};
view raw util.cs hosted with ❤ by GitHub

Checkout the docs 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

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

[Authorize]
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
...
}

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:

<Layout>
<Route exact path='/' component={Home} />
<Route path='/counter' component={Counter} />
<AuthorizeRoute path='/fetch-data' component={FetchData} />
<Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />
</Layout>
view raw App.js hosted with ❤ by GitHub

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.

"dependencies": {
"babel-eslint": "10.0.1",
"bootstrap": "^4.1.3",
"jquery": "^3.4.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0-beta.4",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "^3.0.1",
"reactstrap": "^6.3.0",
"rimraf": "^2.6.2"
},
"devDependencies": {
"ajv": "^6.9.1",
"cross-env": "^5.2.0",
"eslint": "^5.12.0",
"eslint-config-react-app": "^4.0.1",
"eslint-plugin-flowtype": "^2.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.11.1",
"typescript": "^3.5.2"
},
view raw package.json hosted with ❤ by GitHub

SignalR endpoints and automatic reconnect

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

app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<QuestionsHub>("/questionshub");
});
view raw Startup.cs hosted with ❤ by GitHub

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

const connection = new HubConnectionBuilder()
.withUrl(`${server}/questionshub`)
.withAutomaticReconnect()
.build();

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series