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.

 

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

  1. Socratis
    June 29, 2015 at 8:55 pm (9 years ago)

    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 🙂

    Reply
    • Radenko Zec
      June 30, 2015 at 5:33 am (9 years ago)

      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.

      Reply
  2. John MacMenamin
    June 8, 2016 at 1:36 pm (8 years ago)

    This is really great.

    So if you made your auth as a Microsoft server side rest API you could just direct to Aurelia app right away. It could handle calling the API and you would have smooth page animations and no hard refresh correct? One other advantage I could see is for pages that are not auth gated. About, Contact etc. If someone could make this with Core 1.0 when it’s done after June 27th this could be a great starting point for a lot of devs like me just starting out.

    Reply

Leave a Reply