Saturday, 31 August 2013

Ember.js pushState router takeover Laravel route

Ember.js pushState router takeover Laravel route

I'm developing a Laravel/Ember.js app where Laravel serves a general role
of a backend framework and RESTful data supplier and Ember.js partially
for the client side.
So far it works fine. However I want Ember.js to take control for some of
the sub-urls.
Say I have /members route in Laravel which serves Ember app and I want
sub-consequent URL to take advantage of pushState w/ Ember like so:
/members/add, /members/edit/1 etc.. instead of /members#/add,
/members#/edit/1
With Ember this is easily achieved:
App.Router.reopen({
location: 'history', //instead of 'hash'
rootURL: '/members'
})
and it works fine when I click on the links.
However, when I refresh the page Laravel router kicks in with .htaccess
which tries to serve every url through laravel's index.php in public
folder. Here's Laravel original .htaccess file:
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
I'm no expert in Apache URL rewriting, so what I need to do is tell
.htaccess to rewrite everything that follows /members (/members/add,
/members/view etc..) back to /members route so Ember.js would take over
and redirect appropriately.
I was trying to do something like this, but it didn't work:
<IfModule mod_rewrite.c>
Options -MultiViews
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_URI} /members
RewriteRule (.*) members
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
Any help on this topic of url rewriting is appreciated. Thanks!

1 comment:

  1. Really I enjoy your blog with an effective and useful information. Very nice post with loads of information. Thanks for sharing with us..!!..AngularJS Online Training

    ReplyDelete