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

Jot

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.

Nature

Nice answer. But any chance in an alternative without a server-side solution, e.g. with a basic Aurelia CLI or skeleton app? – Attachment

In any case, you'll have some kind of server involved (except if you open index.html file directly in browser, using file:// protocol). In case of skeleton-esnext, for development purpose, that's BrowserSync that you start with gulp watch or gulp serve. So, you'll need to tell it to redirect all calls to one page. Take a look at this answer on SO: https://mcmap.net/q/744807/-can-i-tell-browser-sync-to-always-use-one-html-file-for-html5mode-links, or this issue on GitHub: github.com/BrowserSync/browser-sync/issues/204. When you deploy, you'll need to have some kind of redirect on hosting server to do that. – Nature

Won't this also redirect all incoming calls to any resource referenced in the html file, like js, css, fonts, images,...? – Unfurl

@VincentSels It depends on the server side framework/language used. I.e. for ASP.NET MVC, or WebAPI, static files will be served directly, without going to routing table. I believe that the server is checking whether the actual file exists and if it does, it's served as is. If not, it goes through routing pipeline. I'm not sure about other frameworks, but there should be something similar for all. – Nature

Nice solution - but I host my app on S3 which does not seem to work well with pushstate. Any suggestions? – Aultman

There are similar questions here on SO. Check out the answers to this one: #16267839 – Nature

The link to the article by Dwayne Charrington seems to be broken. – Sokoto

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="/">

Incandescence

I'm using this as well. With Aurelia apps running on the more recent Aurelia CLI v0.32+, this is all that is required. Note that this works with RequireJS flavour; I did have some issues when using System/JSPM. – Attachment