.NET Core handling Client-Side Routes

If you are using any client-side framework like Vue, Angular, React and so, you are probably doing client-side routing which is letting the browser handles the routes E.g. myapp.com/about, myapp.com/account/user etc…

By default, the server only recognizes the root (/) and if you try to refresh the page (f5) or enter directly the URL myapp.com/about you will get 404 ERROR because you are sending an HTTP request to the server in the route /about, but your server doesn’t handle routes different from (/).

To solve this problem I found a really nice approach which is a simple fallback handler in the Startup.cs of our .NET Core app:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ....Your configuration
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
    //handle client side routes
    app.Run(async (context) =>
    {
        context.Response.ContentType = "text/html";
        await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
    });
}

The code above will return the right route to the Browers avoiding the 404 error if the path exists.

Do you have any question or a better approach? share with us in the comments.