17

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

Pratik Gajjar
  • 597
  • 5
  • 14

2 Answers2

23

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([
                //... 
            ]);
        }
    }

  1. 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.

Miroslav Popovic
  • 12,100
  • 2
  • 35
  • 47
  • Nice answer. But any chance in an alternative without a server-side solution, e.g. with a basic Aurelia CLI or skeleton app? – Juliën Aug 04 '16 at 19:57
  • 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: http://stackoverflow.com/a/26789283/119230, or this issue on GitHub: https://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. – Miroslav Popovic Aug 05 '16 at 09:05
  • 1
    Won't this also redirect all incoming calls to any resource referenced in the html file, like js, css, fonts, images,...? – Vincent Sels Oct 27 '16 at 12:45
  • @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. – Miroslav Popovic Oct 27 '16 at 12:56
  • Nice solution - but I host my app on S3 which does not seem to work well with pushstate. Any suggestions? – The Huff May 16 '18 at 00:58
  • There are similar questions here on SO. Check out the answers to this one: https://stackoverflow.com/questions/16267339/s3-static-website-hosting-route-all-paths-to-index-html – Miroslav Popovic May 16 '18 at 08:41
  • The link to the article by Dwayne Charrington seems to be broken. – seebiscuit Jan 30 '20 at 15:30
3

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

Delavega
  • 453
  • 1
  • 7
  • 21
  • 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. – Juliën Jan 18 '18 at 15:28