I've got an Angular app using html5mode, but it's currently sitting within a sub-folder of a site: http://somesite.com/za/
So I've managed to rewrite the url to direct to my assets folder correctly, but I'm still getting 404s when I hit refresh or navigate directly to a page.
So this works: http://somesite.com/za/assets/js/bundle.js
This doesn't work, 404: http://somesite.com/za/home
.htaccess
RewriteEngine On
#This apparently creates a redirect loop for angular
RewriteRule ^(.*)/$ /$1 [L,R=301]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(za/.*) /za/index.html [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(?:[^/]*/)*([^/.]+\.(?:jpe?g|gif|bmp|png||css|js))$ za/assets/$1 [R=301,L,NC]
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
So where is the rewrite failing to redirect to index.html when I hit or refresh a page?
Solved it with a more elegant rewrite rule:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /za/index.html [NC,L]
However, this does give read access to other files and directories, so it can have security issues.
Related
The routing url is like 'my_website/:param'
But my location contain a folder name is as same as the params.
So when I browse with http://my_website/apple.
The browser will display the folder instead of pass the value 'apple' to the web.
How should I set the .htaccess?Thanks
The following only work when the folder with same value is not exist.
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]
</ifModule>
Based on your shown samples, could you please try following. Please clear your browser cache before testing your URLs.
RewriteEngine ON
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/?$ index.html [L]
OR if you are looking only for link which starts with apple then try following.
RewriteEngine ON
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^apple index.html [NC,L]
Problem in OP's tried code: RewriteRule ^(.*) index.html [NC,L] will create an loop because there is no condition mentioned, so its going true each time for each uri.
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 have a angular project with routes in html5 mode. I set up a htaccess file, that is possible to insert a domain manually or refresh the page.
here the htaccess code with works fine, based on this
Still getting 'Not Found' when manually refreshing with angular.js route
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ myFolder/myFile.php [L]
but now i want also to redirect the url to https width www, for example:
http://example.com should become https://www.example.com
there for i used this:
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
But when i try to combine this scripts i always get error!
Thanks!
I'm not sure how you're trying to combine the code, but you should be able to do it this way. Replace example.com with your domain.
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} !^on [OR]
RewriteCond %{HTTP_HOST} ^example\.com [NC]
RewriteRule ^ https://www.example.com%{REQUEST_URI} [R=301,L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ myFolder/myFile.php [L]
Clear your browser cache before trying the new rules.
I’ve build the front end of a site using angular and have created the cms through Kirby. Kirby allows you to build a json api from the structure you create with the cms, like so.
What I’m trying to do now is use the api provided by Kirby which is:
address.com/projects/api
within my angular app. I’m using html5 and htaccess to rewrite my urls so I dont need to use a hash within the url and page refreshes on a subpage get redirected to the appropriate angular view.
address.com/work
address.com/about
address.com/single-project
my htaccess looks like this
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html
Kirby requires its own htaccess to serve pages also, so my question... Is it possible to allow access to my json template at address.com/projects/api and still preserve the angular clean urls?
If I'm understanding you correctly, you want to ignore /projects/api? Then you can do this
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/projects/api [NC]
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
You can add more exclusions in your negative RewriteCond:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !/(index|projects/api) [NC]
RewriteRule ^ index.html [L]
Solved it shortly after posting #facepalm.The additional line that did the trick for anyone in the same or similar situation
RewriteRule (api) index.php
I have the same issue but none of the above solved my problem.
My current .htaccess is as shown below:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^app.mydomain.com [NC]
RewriteRule ^(.*)$ http://www.app.mydomain.com/$1 [L,R=301]
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
my API folder path is http://www.app.mydomain/api
I am trying to get html5mode to work, and by adding this to my .htaccess file I am able to make it work.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
I have a php file called api.php in the same folder as my index.html file that will handle the backend REST api.
Basicly I want the html5mode to continue working but all requests to for example localhost/api/ ... to be sent to api.php
I tried several lines but it breaks the html5mode.
Would be awesome if I could figure this one out.
Best regards
This config was suggested on another answer.
RewriteEngine on
# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api.php
# otherwise forward it to index.html
RewriteRule ^.*$ - [NC,L]
RewriteRule ^. /index.html [NC,L]