Single Page App htaccess config

[microcipcip]

I have a VueJS single page app with a router, how do I redirect all requestes to the index.php page? The processwire .htaccess file is quite big I am not sure how to change it. This is what is suggested in the router docs:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

 

[LostKobrakai]

In short: You shouldn't. You won't want all requests to hit the index.html as it's going to prevent you from hitting processwire in any way (even ajax requests). I'd rather suggest letting your build steps transfrom the index.html into some file, which you can easily include as part of your templates and you're good to go and much more flexible.

The alternative would be serving processwire and the SPA unter totally separate domains / access points.

[microcipcip]

11 hours ago, LostKobrakai said:

In short: You shouldn't. You won't want all requests to hit the index.html as it's going to prevent you from hitting processwire in any way (even ajax requests). I'd rather suggest letting your build steps transfrom the index.html into some file, which you can easily include as part of your templates and you're good to go and much more flexible.

I don't understand how this would work. If I have a js route to http://mysite.com/about/ it returns a blank page when I refresh the page because that template doesn't exist in the ProcessWire FrontEnd, it's only in the JS route. ATM I am already outputting everything in the home.php PW template. All I am trying to do is redirect it to the home.php entry point so that the router will get the right url and load the right js page.

[LostKobrakai]

Just allow urlSegments on the home template, so it's a catch all for urls not existing in processwire itself.

[microcipcip]

8 hours ago, LostKobrakai said:

Just allow urlSegments on the home template, so it's a catch all for urls not existing in processwire itself.

The problem is that the js router is using the same URL of PW so the urls do exist, that's why when I refresh I see a blank page, because there's no php template associated with those pages.

Basically on PW I have a page like http://mysite.com/projects/ with a template projects (without php file) and the same url in the JS router.

The only possible solution I have in mind is move all pages to a container so that in this way I'll be able to allow the app to hit the home.php segment. Is there any other way? I need to rewrite several areas of the app if I change the url (for example the nav...).

[LostKobrakai]

Any page in processwire without a valid template file is like a non existing url to the outside, so it should still work.

[microcipcip]

1. If I browse to an existing page that does not have a php template, for example `http://www.mysite.com/projects/`, in the console I get "[HTTP/1.1 404 Page Not Found 94ms]". If I then create the template used for the 404 error page, it redirects to that template and never hits the home page.
2. If I browser to a non-existing page, then it redirects correctly to the home.php page.
3. If I create the template for the existing page, then it uses that page as template as usual, and not the home.php...

Do I need to use the home.php template as 404 error page? Still, it doesn't seem right that I'd get the [HTTP/1.1 404 Page Not Found 94ms] error message, expecially for SEO

[LostKobrakai]

Did you enable urlSegments on the homepage's template? 

[microcipcip]

Yes, see attachment. I have even tried to disable most of the modules I had installed.

According to this thread, when there is a non existing template on a existing page, a 404 error is thrown.

[microcipcip]

Does anybody know how to do this? Is it possible to do a redirect without getting the 404 error not found?

[kongondo]

Hey @microcipcip. Did you manage to resolve this? I don't have an answer for you though - I have never used Vuejs. I searched for a simple 'how to use Vuejs' example but could not find one that did not require to install stuff via npm (or do stuff with gulp, or grunt or bower or similar; I don't use these tools [fortunately or unfortunately] - who comes up with such names anyway? ). Anyway, would like to help test but don't have time to learn to use npm and similar . 

[microcipcip]

@kongondo I didn't fix this . BTW you don't need npm to use VueJS (although recommended). ATM I am not at home for a week but when I come back I'll create a VueJS+Router starter kit template for ProcessWire and share it on github, as I think other PW users may have this problem.

[LostKobrakai]

I don't think vuejs is needed to test the problem here at all. The thing needed to work is urlSegments for the homepage, so that arbitrary url (besides the /api endpoint) still just return the homepage's content. 

Normally this should be working if there is just the homepage and an /api page, when urlSegments are enabled for the home template.

[Robin S]

On 12/12/2016 at 1:14 AM, microcipcip said:

If I browse to an existing page that does not have a php template, for example `http://www.mysite.com/projects/`, in the console I get "[HTTP/1.1 404 Page Not Found 94ms]". If I then create the template used for the 404 error page, it redirects to that template and never hits the home page.

Could you use the "Alternative Template Filename" option to assign the home.php file to all templates?

[LostKobrakai]

Oh, I always though there where no pages under that url in the page-tree (which is the only time urlSegements are viable). If there are, than Robin's answer is the way to go.

[microcipcip]

Thanks @Robin S that was it! Now it is working perfectly

[bmacnaughton]

Did you ever post the vuejs + PW starter kit?