How to remove # from URL in Aurelia

Question

Can anybody please explain in step by step manner, how can we remove # from URL in Aurelia

Answer 1

The feature you are looking for is called PushState. You can find more info in Cheat Sheet section of Aurelia Hub. Just scroll down to Routing / Configuring PushState.

1. Add a base tag to the head of your HTML document. I don't think this is a required step, since my apps are working without it.

2. If you are using JSPM, configure baseURL (in config.js file).

3. Enable PushState in router config:

    export class App {
        configureRouter(config) {
            config.title = 'Aurelia';
            config.options.pushState = true; // <-- this line
            config.map([
                //... 
            ]);
        }
    }

4. Configure server to support PushState. Basically, this means that your server should redirect all unknown routes/URLs to the home URL (the address of your Aurelia app - index.html, /home/index...).

   This step depends on the server-side technology you are using. I.e. for ASP.NET MVC, this is how you would define your route config:

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            // url: "{*pathinfo}" - this redirects all server side calls
            // to Home/Index (default route)
            // with this single change, HTML5 push state is enabled
            routes.MapRoute(
                name: "Default",
                url: "{*pathinfo}",
                defaults: new { 
                    controller = "Home", 
                    action = "Index", 
                    id = UrlParameter.Optional 
                }
            );
        }
    }

Edit: Dwayne Charrington has a nice article about PushState on his Discover Aurelia site, where he explains how to configure PushState on various server-side frameworks, like Apache, Nginx, .NET Core and Node.js Express.

Answer 2

If you looking for a quick way to make it work do the following:

1. in router config in src/app.ts :

   config.options.pushState = true;

2. in index.html of root directory add the following :

   <base href="/">