Need help getting Ember Routes working with Rails

#1

Hey!

Thank you for reading this post.

I installed this: https://github.com/emberjs/ember-rails using the edge template (with a few modifications to get it working with windows). After running the edge template, I ran rails g ember:bootstrap -g --javascript-engine js which generated all of the necessary files and also a demo application.handlebars file.

I then proceed to create a test.handlebars and added it to the router. Then I simply created a linkto on the homepage and refreshed the page. The problem is when I click that link, it changes the url to /#/help but it still shows the homepage and not the test page. Then, if I try going to localhost:3000/test, I just get a Rails Application error saying that the route doesnt exist.

Now my two questions are:

  • How can I get the test page to work with ember (and rails)?
  • Second, how can I get it so that if you load localhost:3000/test or some other link, it maps to the ember route?

The full source is avaialbe here: https://github.com/nahtnam/Learning/ (some folders are missing, but that is because they are empty).

Any help would be appreciated. Thanks you so much! :slight_smile:

#2

For question 1, you want to put an {{outlet}} into your application.handlebars file for the test view to be rendered into (like rails’ yield).

For question 2, the link currently should be http://localhost:3000/#/test which will work fine. If you want to make http://localhost:3000/test work, you need to configure ember’s router (add to application.js):

App.Router.reopen({
  location: 'history'
});

And as a final catchall in routes.rb:

get '/*path' => 'assets/index'
#3

Thanks a lot for your help! It works like a charm!

#4

Keep in mind that this will not provide HTTP 404’s for routes that don’t exist in your Ember app. To achieve that, you’d need to either maintain sync between the two route syntaxes (ember + rails) or create some common route format that both apps can load from.

#5

What do you mean?

Shouldnt Ember be able to make 404 errors if the page requested isnt in the router.js?

#6

JavaScript cannot alter the HTTP status code itself because JavaScript (in regards to Ember) is run client-side, meaning it has very little relation to HTTP requests. Ember has the concept of the error route substate, which is transitioned to when a route isn’t matched, but this is independent of the response returned from in an HTTP response from the server.

The server is the only one who can send HTTP status codes.

Think of it this way:

Browser requests /about URL from server http://example.com, serverside code looks to see if that resource exists; either static files or in Rails, looks to see if a route matches. It returns an HTTP response, which includes the HTML body along with a status code. If it was matched or found, the code is 200, it not 404. But your JavaScript application isn’t even loaded by the client’s browser until this response is returned, parsed and ran so it’s fundamentally separate.

The example provided above was a wildcard or “catch-all” route for Rails, meaning that regardless of URL requested, the same controller/action will be used to serve your Ember app and since anything matches, a 200 status returned.

If your Ember app is behind a login, this fact almost certainly doesn’t matter. It’s primarily an issue when it’s public and being crawled by search engines. If Google crawled your app, /a, /b, /c, etc would all return 200 and Google would think you have an infinite number of pages. But Google (and most search engines) are smart enough to recognize this isn’t the case and will instead attempt to guess the real URLs, but at a penalized index score.

#7

Thank you for this explanation. It makes much more sense now!

What do you think is the best way to handle this? I tired looking at some Rails + Ember demo, but none of them handle 404 errors.

Is there a way for Ember to pass data to the rails routing to display a 404 error?

Thanks.

#8

According to a user on IRC, I should mirror the ember routes in rails, BUT he does not know any way to do this AUTOMATICALLY.

It would be great if someone could show how to automatically do it.

Thanks.

#9

There is no way to do it automatically (unless someone can figure out how to dump ember’s routes as a static tree rails could then parse). Like @jayphelps explained, they’re separate systems.

If you can be happy with URLs like http://localhost:3000/#/test then there’s no problem. If you can’t be happy with those, and need 404s working, then mirror the routes manually.

#10

Ok, Thank you both for your help! :slight_smile: