Ember.js pushState router takeover Laravel route

Question

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!

Answer 1

take a look:

It's working for me!

Bye!