Framework7 – Remove Hash Based Routing with Apache

Framework7 is a UI framework which is used to build apps like PWA, which works on The App Shell Model. The app “shell” loads the HTML, CSS and JavaScript required to run the UI and get cached on the user side.

When navigating between pages, Framework7 changes the hash in the browser and request the HTML of the new page. Changes made to hash is kept in history stack. The default behavior is acceptable in almost all scenarios. However, in some cases browser may lose hash parameters on redirection which can make your web-app fail to work.

The framework uses #! as the default push state separator. This can be changed to # by passing this parameter in the app initialization and will start working without any problem. However, if you want to get rid of the “hash” completely, we need to add few configuration to make it work.

Non-Hash Routing

First configuration would tell the app that we don′t want any “Push State Separator” at all. We are passing an empty string here.

    var app = new Framework7({
        root: "#app", // App root element
        id: "com.domain.app", // App bundle ID
        name: "My Awesome App", // App name
        view: {
            pushState: true,
            pushStateSeparator:"",
            pushStateOnLoad:true
        }
    });

Once we do this, our app navigation will start working from one page to another. Let′s see the example.

Let′s say if our home page is https://myapp.com/, we can now navigate to Page 1. So, if earlier it was looking like https://myapp.com/#page1, after the above configuration, it will look like https://myapp.com/page1

Now, there is a new problem. The “page1” will work fine when navigated from home page. But, if you directly hit the URL of page1, it wont. Why?

The new URL of Page 1 is “https://myapp.com/page1”, so when we hit this in browser, the request will go to Apache (or, the web server) and the page will not be found. To make this work on hard reload as well, we need to make a little change in either Apache or the .htaccess file.

Change in .htaccess

Below code will take care of routing such pages which earlier used to work behind hash. Now that hash is not there, the path after hostname will directly reach our web server. Here, with help of this code, apache will return index.html for any such requests. Once the UI layer receives index.html, navigation will be managed by “pushStateOnLoad” parameter which is set to true.

    RewriteEngine on
    RewriteCond %{REQUEST_URI} !^/index.html$
    RewriteCond %{REQUEST_URI} !.(gif|jpe?g|png|css|js|svg|html|woff|woff2|ttf)$
    RewriteRule . /index.html

Few more things to take care

Any external resources, for example images, fonts, CSS or JS files, if you are hosting on same domain, should have either fully qualified URLs. Or if you are using relative URL, then they should start with “/”. For example:

    <link rel="stylesheet" href="/css/some-additional-css.css">
    <script src="/js/some-additional-javascript.js"></script>
    <script src="/service-worker.js"></script>