Search code examples
knockout.jsweb-crawlersingle-page-applicationhistory.jspagerjs

Navigating a SPA (Single Page Application) but page breaks on refresh? (knockout.js, pager.js, history.js)


I'm creating a SPA (Single Page Application) with html5, knockout.js, history.js, and pager.js..

Everything's working nice except for a "Real" page refresh. Since the content is getting dynamically written from pager.js (a plugin for knockout.js that navigates through divs) and the history.js is changing the uri, when the webpage is refreshed it breaks with a 404 error. On pager.js website however, I can refresh any of the dynamic links and it works as normal. I've gone through the documentation but I'm unsure on how to fix the issue. I saw something at the end referring to crawler.js taking snapshots of the html for search engines and that could possibly be my answer though I'm not sure.

Does anyone have an idea of how to fix this? Is crawler.js my answer?


Solution

  • you'll need to configure your webserver to serve your html-page for a range of patters/URLs instead of just its normal URL. This is something you'll need to do whenever your are using history.js (or any other html5 history solution).

    Let's say your page is

    example.com/my_page/  // points to some_folder/index.html
    

    and you are navigating to

    example.com/my_page/side_1
    

    then you'll need to make your webserver to serve your file index.html even if the URL example.com/my_page/side_1 is accessed. Otherwise your server will respond with a 404 since it will try to serve the file some_folder/side_1 which does not exist.