CODEWITHSUNDEEP
node.jsember.jsexpress
jjwon
jjwon

Reputation: 204

Ember and Express: let Ember handle routes instead of Express?

This might be a dumb question, but I'm serving an Ember app I made using ember-cli on an Express server, but when I try to access various routes, my Express app errors, saying that no route exists (which is true, because I defined the routes in Ember, not Express). How should I resolve this, and is this normal behavior?

My Ember router:

Router.map(function() {
  this.route('index', {path: '/' });
  this.route('portkey');
  this.route('login');
});

My Express routes are just an API that do not serve any of the Ember routes, since localhost:1234 will automatically load index.html.

Upvotes: 2

Views: 1154

Answers (2)

schad
schad

Reputation: 1512

I had similar issues when trying to directly access any part of my Ember project other than index.html. From there I could easily navigate where I wanted, but it meant that providing someone a link or refreshing the page would fail.

Example: /accounts would fail. /#/accounts would successfully redirect to /accounts however refreshing still would not work.

Solution:

Router.map(function() {
  this.route('accounts');
});

Router.reopen({
  location: 'hash'
});

Now all of my links are prefixed with # such as /#/accounts, refreshing and direct-linking works as expected.

Upvotes: 0

pattmorter
pattmorter

Reputation: 991

I've never had a problem using the Ember Router instead of the Express router. All I do is have 1 express route (for '/') which displays my Ember application index.html (well actually index.ejs) page. Not promising this is the right way to do it, but it's how I do it and it works for me.

So start with this.

app.get('/', function(req, res) {
    res.render('index', {});
});

That's your express route. Now your ember routing.

App.Router.map( function() {
    this.route("about", { path: "/about" });
    this.route("favorites", { path: "/favorites" });
});

So as of now you have a routing structure that looks like the following:

yourdomain.com/             --> index.ejs displayed via express routing
              /#/           --> this is the ember index route
              /#/about      --> this is the ember about route
              /#/favorites  --> this is the ember favorites route

Within the index.ejs file you have the basic ember file linking to your ember application.

Now onto your linking problems...

If you use the ember router, then make sure you are linking to your different routes the correct way. (Remember, ember routes start with /#/someroute).

So your links in handlebars should be something like:

{{#link-to 'some_page'}}Go to some page{{/link}}

NOT

<a href="some_page">Go to some page</a>

Using the second, express would be trying to handle the routing but by using the first, ember is handling the routing.

So if you really think about it, you can have as many ember applications as your little heart disires because each ember application is linked to that current page in the express routing.

For example on my website, I use two routes (plus a bunch of REST routes obviously): login.ejs and index.ejs.

So for my site, I have the following routes:

mysite.com/             
          /#/           
          /#/budget     
          /#/history     
          /#/profile    
          /#/logout     

mysite.com/login#/
                #/register
                #/forget

I hope this helps you a little bit.

EDIT

/#/ is a convention to tell ember you are routing via its router.

Think of it like this: Ember is a single-page framework. So when you link from page to page in ember, you aren't truely changing pages. You are just removing dom elements and replacing them with new ones. But if you go to /budget on the server, you are now going to a whole new page, not just the /#/budget section of the ember application.

I think you are just confusing what the ember router really is.

Upvotes: 4

Related Questions