Haven't found anything on this yet, but has anyone found out the right way to turn HTML5 mode on and have it work correctly with wordpress and it's current rewrites?
Wordpress rewrites:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
#Current wordpress rewrites
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) /index.php [L]
</IfModule>
And of course the apache HTML5 mode rewrites
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) /index.html [L]
I know their EXTREMELY similar but I'm having a hard time getting HTML5 mode to work on refresh while having a Angular APP embedded into a wordpress / php page.
After hacking on this, I came to a pretty hacky answer, YMMV:
RewriteRule ^search/([^/]+)$ http://www.example.com/search/#/$1 [NE,L]
In my current situation my app lives in example.com/search/
So your telling me you turned on HTML5 mode to essentially revert it back with a redirect?!
Yes.
Are you drunk?
Possibly, but I do have a couple reasons on why;
I can't redirect wordpress back to index.html, because well it will fail horribly.
What's the next best thing? A hash, because when html5mode is off it works perfectly fine!
So why even turn HTML5 mode on? Well I had to, I have a couple things going on in the background that I need crawlers to read etc.
Crawlers? Why not just use prerender.io or another framework? 1-Money 2-Resources 3- Can we start coining the term... Instead of throwing money at a problem, let's throw a framework at it.
I'm not going to accept my answer because well it's a hack, but I know alot of people are faced with this after doing some searching. Hopefully someone / we can come up with a better solution to this!
This seems to work just fine for me with WP. This will skip to the actual resource if there is one and to index.php if not.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.php [L]
Sample route which would render service if the url was /service or /home if the url was anything else.
$routeProvider
.when("/service", {
controller: "ServiceController",
templateUrl: "/wp-content/themes/angularjs-wp/templates/service/index.html"
})
.otherwise({
redirectTo: "/home"
});
$locationProvider
.html5Mode(true)
Related
I have a Wordpress site with a headless React frontend. With the default .htaccess file that Wordpress puts up on install, the site was not correctly handling requests to any page other than the root. Those requests ignored React altogether. I modified the .htaccess to point all requests to the index.html file like the following...
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
This loads the React site just fine on all requests, but it's also failing on any api request to either wp-json or more importantly graphql. This means the page loads, but the content is essentially absent. How can I set up the .htaccess file to allow requests to those api endpoints on top of allowing the initial requests going to the index.html?
This seems to be working so far...
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^graphql(.*)$ index.php?url=$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Stole part of this from this answer...
How to redirect all API requests using .htaccess, while keeping asset requests intact?
I'm not sure I need that url=$1 part since I'm not using it elsewhere, but I'm not that good at regex and at least the request are getting handled correctly.
I have two react apps in the same subdomain - in different directories.
app.domain.com
app.domain.com/login
For react router to work I have existing .htaccess rules to redirect all traffic to the app (index.html)
RewriteEngine On
#Redirect to https
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteBase /
#Not sure what this does
RewriteCond %{QUERY_STRING} ^open&guid=
RewriteRule ^ ? [R=301,L,NE]
#Not sure what this does
RewriteRule ^index\.html$ - [L]
#Redirect all to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
I want to allow to load the react app in directory /login and redirect all /login/* requests to /login/index.html.
How can I apply these rules using .htaccess?
Kind regards /K
Your existing .htaccess is fine. Just create another .htaccess under /login/ directory as this:
RewriteEngine On
#Redirect all to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
This will route every non-file and non-directory /login/* request to /login/index.html
With your shown samples, could you please try following. Please make sure you clear your browser cache before testing URLs.
RewriteRule ^login/?$ login/index.html [NC,L]
OR uri has starting login with having other things in uri.
RewriteRule ^login(?!=index\.html) login/index.html [NC,L]
I'm currently running php on an apache server locally, with a React frontend.
This is how my current .htaccess is laid out:
Options -MultiViews
RewriteEngine On
RewriteRule ^api/(.*)$ api/$1\.php [L]
RewriteCond %{REQUEST_URI} !^/api.*?
RewriteRule ^ index.html [QSA,L]
The bottom condition is so that routing works in my React app. I'm then taking the production build and copying it into my htdocs.
The routing works, however, I want to be able to call the .php files inside my /api directory without using the file extension. So I want anything that comes after /api/ to be redirected to whatever is entered, followed by .php.
E.g. /api/authentication would go to /api/authentication.php, and /api/register would go to /api/register.php, and so on.
With this current setup, I'm getting a 500 internal server error when making requests to /api/authentication etc.
Is there something wrong with my .htaccess file?
Your first rule is looping as you're matching .*. You may use:
Options -MultiViews
RewriteEngine On
RewriteRule ^index\.html$ - [L,NC]
RewriteCond %{REQUEST_URI} !\.php$ [NC]
RewriteRule ^api/(.+)$ api/$1.php [L,NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule !^api index.html [L,NC]
RewriteCond %{REQUEST_URI} !\.php$ [NC] will skip rewriting when a URI ends with .php.
I am a bit out of my depth when it comes to most server tasks so bear with me on my descriptions and understanding...
I am trying to use htaccess to force https across domain with Angular app in a subdirectory.
Project structure
/ public
- .htaccess
- index.html
- styles.css
- main.js
- etc...
/ admin (angular app)
- .htaccess
- index.html
- etc...
I am trying to force https across the whole domain while still being able to deep link to the /admin (angular) routes.
/public/.htaccess
RewriteEngine On
RewriteCond %{HTTP_HOST} ^site\.co\.uk$ [OR]
RewriteCond %{HTTP_HOST} ^www\.^site\.co\.uk$
RewriteRule ^(.*)$ https://www.site.co.uk/$1 [R,L]
/public/admin/.htaccess
RewriteEngine on
RewriteOptions inherit
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
All /admin routes are still accessible via plain http and are not redirected. I have tried various combinations of ${SERVER_PORT} & ${HTTPS} but these never trigger. It always seems to return port 80 and https off and causes "too many redirects".
I have html5mode enabled so my urls look like domain.com/route and not like domain.com/#/route.
What I use is this rewrite code:
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
It works fine with first level routes (domain.com/firstlevel) but it doesn't with secondlevel (domain.com/firstlevel/secondlevel).
Any ideas on how I can modify the rewrite code to put an "/#" before the whole url of any length?
Thanks
This might be a code problem however it might be getting encoded and maybe that's why it's not working for you. Typically if you don't escape the # it will encode it.
You can try it using the NE flag.
RewriteRule ^(.*)$ /#/$1 [NE,L]