microcipcip

Single Page App htaccess config

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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...).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
  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

Share this post


Link to post
Share on other sites

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

img_004.jpg

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

Share this post


Link to post
Share on other sites

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? :P). Anyway, would like to help test but don't have time to learn to use npm and similar :)

Share this post


Link to post
Share on other sites

@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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

2017-01-09_214103.png

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By neophron
      Hi there,
      a few weeks ago I completed a 3.098 installation (server php 7.2). Yesterday I wanted to login but failed. I tried different browsers, meanwhile on two different PCs, but no login.
      Then I realized, that after hitting the »Login« button, there was no message (admin name – Login failed). I also tried all procedures (https://processwire-recipes.com/recipes/resetting-admin-password-via-api/). Then I checked the errors.txt (site/assets/logs) – nothing.
      The frontend works fine. Is there a way to check this Processwire installation? Could be something missing?
       
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I'm trying to automatically redirect a logged-in user to a custom profile page using $session->redirect() and need to add $user->name to the redirect path.
      All my attempts appear to have failed:
      $session->redirect('/user-profile/')->name; $session->redirect('/user-profile/')->$user->name; $session->redirect('/user-profile/' . get($user->name . '/')); $session->redirect('/user-profile/' & get($user->name)); Can anyone point out where I am going wrong?
    • By louisstephens
      So I have been diving into vue.js lately, and I am really impressed. I thought it could be perfect for an internal dashboard using PageQuerry boss to retrieve the data. However, I do have a few questions that someone might be able to guide me with before I fully commit. 
      1. Is it even possible to bootstrap pw into a vue app?
      2. How would it be possible to handle user registration/logins without actually having to mirror the users on pw in another service? 
      3. I know I could easily use an iframe in a modal to handle page editing (as I have done it inside of pw before), but would this be the best solution?
    • By Jennifer Stock
      Greetings. I would like to restrict access to certain sections of my organization's ProcessWire site using pubcookie. We are rolling out Shibboleth authentication later this year but for now, it seems I can only make use of our institution's single sign-on routine by utilizing rules in an .htaccess file. 
      I am wondering if there is a way to ask PW to apply these rules to certain pages in the site, whether via template type or location in the page tree:
      AuthType UWNetID PubcookieAppID "MyApplication" require type staff faculty  
    • By Marco Angeli
      Hi there,
      I added a ssl certificate to my site and I'd like to redirect every single http url to its new https version
      So I added this code in the .htacces file, after the RewriteEngine On :
      Redirect 301 /about https://www.mysite.it/about
      Unfortunately this is now working: I get the "too many redirects" error.
      The following code works, but it's a bulk redirection to the home page, something I don't want for SEO reasons (https://moz.com/blog/save-your-website-with-redirects😞
      RewriteCond %{HTTP_HOST} mysite\.it [NC]
      RewriteCond %{SERVER_PORT} 80
      RewriteRule ^(.*)$ https://www.mysite.it/$1 [R,L]
      Any suggestions?