Jump to content
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 2

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 benbyf
      Unable to install module (ProcessRedirects): Specified key was too long; max key length is 1000 bytes get this when installing ProcessRedirects on PW 3.0.139. It adds an empty admin page to Setup and dies before publishing. Any help would be appreciated.
    • By stanoliver
      Hi! 
      The following code snippet is part of my markup simple navigation and the url_redirect (url field in the backend) just works fine when I put an special custom url into the url_redirect field.
      <?php $nav = $modules->get("MarkupSimpleNavigation"); // topnav $current = $page->rootParent(); // current root page // subnav echo $nav->render(array( 'max_levels' => 2, 'item_tpl' => '<h4><a class="g8-bar-item g8-hover-black" href="{url_redirect|url}">{title}</a></h4><hr class="sidenav">', 'collapsed' => true, ), $page, $current); ?>  In my seperated breadcrumb navigation I use the following code snippet
      <?php foreach($page->parents()->append($page) as $parent) { echo "<li><a href='{$parent->url_redirect|url}'>{$parent->title}</a></li>"; } ?> Now to the problem: In my first code snippet above the
      url_redirect|url 
      works just fine but when I try something similiar in the second code snippet
      $parent->url_redirect|url
      I produce an server error How do I have to change the second code snippet so that it works in the correct way as the first code snippet does?
    • By schwarzdesign
      We recently rebuilt the Architekturführer Köln (architectural guide Cologne) as a mobile-first JavaScript web app, powered by VueJS in the frontend and ProcessWire in the backend. Concept, design and implementation by schwarzdesign!
      The Architekturführer Köln is a guidebook and now a web application about architectural highlights in Cologne, Germany. It contains detailled information about around 100 objects (architectural landmarks) in Cologne. The web app offers multiple ways to search through all available objects, including:
      An interactive live map A list of object near the user's location Filtering based on architect, district and category Favourites saved by the user The frontend is written entirely in JavaScript, with the data coming from a ProcessWire-powered API-first backend.
      Frontend
      The app is built with the Vue framework and compiled with Webpack 4. As a learning exercise and for greater customizability we opted to not use Vue CLI, and instead wrote our own Webpack config with individually defined dependencies.
      The site is a SPA (Single Page Application), which means all internal links are intercepted by the Vue app and the corresponding routes (pages) are generated by the framework directly in the browser, using data retrieved from the API. It's also a PWA (Progressive Web App), the main feature of which is that you can install it to your home screen on your phone and launch it from there like a regular app. It also includes a service worker which catches requests to the API and returns cached responses when the network is not available. The Architekturführer is supposed to be taken with you on a walk through the city, and will keep working even if you are completely offline.
      Notable mentions from the tech stack:
      Vue Vue Router for the SPA functionality VueX for state management and storage / caching of the data returned through the API Leaflet (with Mapbox tiles) for the interactive maps Webpack 4 for compilation of the app into a single distributable Babel for transpilation of ES6+ SASS & PostCSS with Autoprefixer as a convenience for SASS in SFCs Google Workbox to generate the service worker instead of writing lots of boilerplate code Bootstrap 4 is barely used here, but we still included it's reboot and grid system Backend
      The ProcessWire backend is API-only, there are no server-side rendered templates, which means the only PHP template is the one used for the API. For this API, we used a single content type (template) with a couple of pre-defined endpoints (url segments); most importantly we built entdpoints to get a list of all objects (either including the full data, or only the data necessary to show teaser tiles), as well as individual objects and taxonomies. The API template which acts as a controller contains all the necessary switches and selectors to serve the correct response in <100 lines of code.
      Since we wanted some flexibility regarding the format in which different fields were transmitted over the api, we wrote a function to extract arbitrary page fields from ProcessWire pages and return them as serializable standard objects. There's also a function that takes a Pageimage object, creates multiple variants in different sizes and returns an object containing their base path and an array of variants (identified by their basename and width). We use that one to generate responsive images in the frontend. Check out the code for both functions in this gist.
      We used native ProcessWire data wherever possible, so as to not duplicate that work in the frontend app. For example:
      Page names from the backend translate to URLs in the frontend in the form of route parameters for the Vue Router Page IDs from ProcessWire are included in the API responses, we use those to identify objects across the app, for example to store the user's favourites, and as render keys for object lists Taxonomies have their own API endpoints, and objects contain their taxonomies only as IDs (in the same way ProcessWire uses Page References) Finally, the raw JSON data is cached using the cache API and this handy trick by @LostKobrakai to store raw JSON strings over the cache API.
      Screenshots














    • By ce90
      Hello everyone,
      hopefully this is the right place to ask and is not a duplicate question.
      I'm pretty new to processwire, so... if this question is kind of funny for some of you, you're welcome 😄 
      I have the following issue and can't find anything understandable about it. Maybe I'm searching the wrong way, but anyways.. here is my question:

      How is it possible to rewrite the URLs, that I'll get a *.php ending?
      Example:
      https://www.mysite.de/urlsegment/ -> https://www.mysite.de/urlsegment.php
      https://www.mysite.de/urlsegment/urlsegment/ -> https://www.mysite.de/urlsegment/urlsegment.php
      Because I've read a lot about "Why do you wanna do this or have that?" – here my answer for that in advance:
      I've built a processwire installation inside or around an existing website. Therefore, we want to keep the existing *.php Google entries. Sure, we could redirect via 301 Redirect, but would prefer to keep the *.php ending.
      If you have further questions, please do not hesitate to ask.
      Thank you in advance for your help.

      Best regards
      ce90
    • By Orkun
      Hi Guys
      How can I make a redirect inside the .htaccess to my custom maintenance.html file when any URL of my Website is accessed except the processwire admin (www.example.com/processwire/).
      Because I want that my User's still can access the website when they are loggedin in Processwire.
      When the current url starts with /processwire or if there is a processwire-login-cookie (Is there a cookie when user is logged in Processwire?) available the redirect should not work. Otherwise it should work.
      How can I achieve this?
×
×
  • Create New...