0

I have just started using page.js, a routing library that I intend to use to make a single page application with handlebars. I will use the routes to call different handlebar templates. So far, this functionality is working and is as quick as I had hoped.

I am currently encountering an issue where refreshing the page (pressing F5) or copying the URL, and pasting it into a new tab gives me a 404 not found error. It is not calling the not found page that I created in my app.

The code below is a copy of: https://github.com/visionmedia/page.js/tree/master/examples/notfound

<!DOCTYPE html>
<html>
<head>
  <title>Not Found</title>
  <script src="/page.js"></script>
</head>
<body>
  <h1>Not Found</h1>
  <p></p>
  <ul>
    <li><a href="./">/</a></li>
    <li><a href="./about">/about</a></li>
    <li><a href="./contact">/contact</a></li>
    <li><a href="./not-found">/not-found</a></li>
  </ul>
  <script>
    page.base('/notfound');
    page('/', index);
    page('/about', about);
    page('/contact', contact);
    page('*', notfound);
    page();

    function index() {
      document.querySelector('p')
      .textContent = 'viewing index';
    }

    function about() {
      document.querySelector('p')
      .textContent = 'viewing about';
    }
    function contact() {
      document.querySelector('p')
      .textContent = 'viewing contact';
    }
    function notfound() {
      document.querySelector('p')
      .textContent = 'not found';
    }
  </script>
</body>

When I refresh this page, I am presented with my localhost's 404 page. I get the same result when I use the link http://127.0.0.1/notfound/about.

My question is this: does page.js support refreshing the browser, or using links to access specific portions of my application?

It seems that the question I should really be asking is this: Would it be possible for the web server to redirect all navigation to the page that loads the application? The answer is Yes.

It seems that refreshing the browser would be a common case. An acceptable solution to this would also be to catch any refresh attempts, and redirect them to the main page. Using links to access specific portions of my application is not as crucial, but would be a nice touch.

Jermaya
  • 156
  • 10
  • You may be missing a fundamental concept of how a web server works. A request to /foo/bar/bat will cause the web server to try and *do something*. It doesn't know to serve your single-page-application unless you tell it to. By default, all web servers out of the box look for a file at the given path in the url. Want to re-ask your question with a specific web server in mind? – Crescent Fresh May 18 '16 at 20:26
  • I will be deploying the application on an apache web server. Your comment does answer most of my question however. I was under the impression what I was trying to do could not work. Bringing me to my work around. This application will be the only thing that users can go to on the server. I will not be directly managing the web server, but would it be possible for the web server to redirect all navigation to the page that loads the application? @CrescentFresh – Jermaya May 18 '16 at 20:34
  • > *would it be possible for the web server to redirect all navigation to the page that loads the application?* You should edit to make that your new question :) The answer is: absolutely definitely Apache can do that. – Crescent Fresh May 18 '16 at 20:38
  • I have edited the current question to contain that question as well. Since there is very little documentation and support for page.js, I am leaving the title in hopes this helps someone else. Thanks for your help! – Jermaya May 18 '16 at 20:43
  • Good lord, 17hrs and still no answer. SO is a wasteland, man. Something like this should get you on the right track: http://serverfault.com/questions/32513/url-redirect-to-another-page-on-the-same-site – Crescent Fresh May 19 '16 at 13:57
  • Heh... yeah, I took your advice, and just quickly edited my local web server to redirect to the index.html (which hosts the application) and now when I refresh, page.js calls the correct function and re-creates the page that was open before refreshing. This gives me the functionality I had been hoping for, which is why I thought I was misusing page.js. This also allows me to enter a specific URL based on my custom routes, and it places me at that location in my application. – Jermaya May 19 '16 at 16:46

0 Answers0