404 error on reload when deployed to GitHub Pages

[reubano]

I have an app that works fine in development mode, but once I deployed to GitHub Pages I get a 404 error anytime I reload or type in the url for any route except the homepage. The weird thing is that the routing works perfectly fine when clicking the links. Does this have anything to do with push state by any chance?

brunch 1.7.13
chaplin 1.0.0

[molily]

Yes, that’s logical. While browsing the app, the URL is changed by pushState without sending requests to the server. If I enter the URL directly, a server request is sent. But GitHub Pages doesn’t respond to all URLs that I use in my single-page app, therefore the server returns a 404.

In a single-page app the server needs to know the possible URLs as well and respond at least with an HTML page that starts the Chaplin app. Then Chaplin is able to route the URL. See ost.io for example.

As far as I know, a catch-all isn’t possible on GitHub pages since they are completely static. On another web server, it’s easier to set up such a server-side logic.

[reubano]

Ok thanks. Im not able to test now, but will disabling pushstate fix the error or do i need to do something else in addition?

Sent from my iPhone

On Apr 18, 2014, at 12:09 PM, Mathias Schäfer notifications@github.com wrote:

Yes, that’s logical. While browsing the app, the URL is changed by pushState without sending requests to the server. If I enter the URL directly, a server request is sent. But GitHub Pages doesn’t respond to all URLs that I use in my single-page app, therefore the server returns a 404.

In a single-page app the server needs to know the possible URLs as well and respond at least with an HTML page that starts the Chaplin app. Then Chaplin is able to route the URL. See ost.io for example.

As far as I know, a catch-all isn’t possible on GitHub pages since they are completely static. On another web server, it’s easier to set up such a server-side logic.

—
Reply to this email directly or view it on GitHub.

[akre54]

You could use hashChange instead of pushState, so all your urls would look like https://reubano.github.io/home#subpage/2. That way you don't need the server component in place.

[reubano]

Ok. How do i implement that?

Sent from my iPhone

On Apr 18, 2014, at 4:34 PM, Adam Krebs notifications@github.com wrote:

You could use hashChange instead of pushState, so all your urls would look like https://reubano.github.io/home#subpage/2. That way you don't need the server component in place.

—
Reply to this email directly or view it on GitHub.

[akre54]

It's the default in Backbone.history.start. Initialize your application (new MyApp) without the pushState or hashChange opts (Chaplin passes all options to Chaplin.Application through to Backbone.history.start).

[reubano]

Default chaplin has no pushState opts. This worked.

initialize.coffee

$ ->
  console.log 'initializing app'
  new Application {
    controllerSuffix: '-controller'
    routes: routes
    pushState: false
  }

[akre54]

Yep yep.

[reubano]

Ok. Just found a new issue. Links correctly add the # when clicked directly, but if you CMD or CTRL click to open the link in a new window the # isn't added and it 404s. See #807