Getting user-friendly routes with Aurelia in ASP.NET 5



If you want to use Aurelia framework inside ASP.NET 5 application you have a great tutorial from Scott Allen that will help you to jump start.

When you finish configuring Aurelia app files to reside in wwwroot folder of your ASP.NET 5 application you can run Aurelia app easily by typing for example http://localhost:5000/index.html

The problem is if you want to mix ASP.NET MVC 6 app with Aurelia.

I need to have several ASP.NET MVC 6 views like Login and Registration in my Web app and after login to redirect users to Aurelia app.

In ASP.NET MVC 6 app I have a URL like this: http://localhost:5000/Account/Login and I want to my Aurelia app have a URL like this: http://localhost:5000/Aurelia .

If you want to use razor views there is a nice workaround for that in official Aurelia docs.

If you want to use regular HTML files like me follow this simple tutorial.

Easiest way to do this is to redirect users to a controller which will return Aurelia app:

    public class AureliaController : Controller
    {
        private readonly IApplicationEnvironment _hostingEnvironment;
        public AureliaController(IApplicationEnvironment hostingEnvironment)
        {
            _hostingEnvironment = hostingEnvironment;
        }
        public IActionResult Index()
        {
            var path = _hostingEnvironment.ApplicationBasePath + "\\wwwroot\\index.html";

            if (System.IO.File.Exists(path))
            {
                return File(path, "text/html");
            }
            return HttpNotFound();
        }
    }

 

You need to name the controller properly. For a route http://localhost:5000/Aurelia you need to name it  AureliaController.

IApplicationEnvironment is automatically injected in the constructor by ASP.NET 5 so we can access ApplicationBasePath variable.

Index method will return File result with Aurelia root application file in this case index.html.

So my resulted route will be http://localhost:5000/Aurelia and when I navigate using a router to another view like http://localhost:5000/Aurelia#welcome my routes are persisted and not changed to http://localhost:5000/index.html.

I hope this tutorial will help someone to jump start with AureliaJs in Visual Studio 2015.

If you like this article don’t forget to subscribe to this blog and make sure you don’t miss new upcoming blog posts.

 

  • Socratis

    Just to make sure I understood properly. Once I authenticated user in Asp.Net MVC 6 on server side I can then redirect the user to Aurelia app? This would be awesome. Needs more detail or a sample app 🙂

    • Sure you can. Just implement a code above. When you wan’t to redirect users to Aurelia app just redirect them to this Controller using for example RedirectToAction or redirect them to appropriate URL.

  • Great post. i look forward to seeing more with MVC 6 and Aurelia.