I'm trying to set .htaccess file so after reload it will first load index.html and then change route so my routing will notice it.
I added
$locationProvider.html5Mode(true);
to angularjs .config
and my htaccess is:
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
the bahoviour is that my spa when I load index.html is working correctly but then when I navigate to some route and press refresh it say:
Cannot GET /mailbox
What's wrong with my htaccess file? It's in root directory of project.
I'm running my project by live-server.
Related
i have a react app that i've deployed on subdirectory of a site,
the subdirectory is something like this www.example.com/iapp, i've also configed my package.json and Router to that subdirectory like below.
in my package.json :
"homepage": "example.com/iapp",
and in my router i've added a basename like below
<Router basename={'/iapp'}>
</Router>
everything works fine and all, but the routing is off, when i reload page anywhere but this url:
example.com/iapp nothing loads, and a blank page shows up.
i know this has something to do with htaccess and apache config for react router, but i can't seem to fix the problem.
So yeah, I found a way to do this, and it was pretty easy, so what you're gonna do is create an .htaccess file in your subdirectory, for me the name of that subdirectory was iapp and then add the below config to it, and that's it.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /iapp
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /iapp/index.html [L]
</IfModule>
I'm having trouble getting my create react app build to properly route to my components on my server.
I have a .htaccess file
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
so that it always routes to my index.html
the url to my site is .com/project and my homepage option in my package.json file is homepage: '/project'
I have ran out of things to do.
Because of my htaccess it's always routing to my index.html but the router is always loading the 404 component. What am I missing.
This occured because the base routing was wrong so it was constitently routing to the 404 page.
Setting the <Router basename="/<Directory>"> and adding the homepage option to my package.json file fixed this problem.
For me worked with this .htaccess:
RewriteEngine On
RewriteBase /project
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.html?$1 [L,QSA]
I am working in angular project. I am using angular ui routing. link is http://keraiz.com. I need to remove # from url. so I enable html5 mode by
$locationProvider.html5Mode(true);
The I define base href by <base href = '/' />
then I write rewite rules in .htassess file -
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
Now on same tab it is working fine. but If I reload link or open line in new tab it jump on 404 page. so how can I resolve this issue. I don't want to go 404 page. like if there is request of keraiz.com/about then i want to go about page
Overview :
I would like to redirect the visitor on a default page(index.html) inside the directory structure to display when a directory is accessed using .htaccess file(as of now current directory index.html is loading).
But When I turn on $locationProvider.html5Mode(true) in my angular application getting below error.
Console Error :
Directory structure of Application :
public_html
--prod
--public
--app
--controllers
--directives
--services
--app.config.js
--index.html
--.htaccess
.htaccess
public_html => .htaccess :
DirectoryIndex prod/public/index.html
This .htaccess is used to redirect the visitors on a application page (prod/public/index.html) directly by using domain name, as of now when user visit the domain the current directory(public_html) index.html is loading.
public_html => prod => .htaccess :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /prod/public/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /prod/public/#/$1
RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteRule ^(.*)$ http://www.example.com/prod/$1 [L,R=301]
</IfModule>
prod => public => index.html :
<base href="/prod/public/">
Everything working fine If i removed $locationProvider.html5Mode(true) from my app.config.js file.So, when I comment out the $locationProvider code, everything works fine in # mode. I can get to /#/abc, etc. without issue. As soon as I put the $locationProvider parts back in, nothing happen.
Related issues on Stack Overflow with no success :
$locationProvider.html5Mode(true) issues
Angular html5 mode not working in apache
Inside public_html => .htaccess have this rule instead:
DirectoryIndex index.html
RewriteEngine On
RewriteRule ^/?$ prod/public/index.html [L]
then public_html => prod => .htaccess should have this:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ public/index.html [L]
I've got an AngularJS app running on top of CakePHP 2.6. I'd like to enable html5mode in Angular so I don't have to include a # in URLs, but doing so requires configuring some .htaccess files so that all requests hit index.html.
Not all of my web app is Angular yet, so I can't just redirect everything to index.html- instead, I'd like to set things up so that all requests to a certain subdirectory (and its subdirectories) redirect to that subdirectory's index.html.
CakePHP has a folder structure like this:
/ // Server web root directory: index.php, etc
----/app // The directory containing the actual Cake app
----/webroot // Web assets used by the Cake app
----/myapp // Where I'd like to store the index.html for my Angular app
I'd like to get this set up so that any requests to /myapp or its subdirectories get automatically redirected to /app/webroot/index.html. Does anyone have any ideas about how to go about this?
My current .htaccess files:
/:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
</IfModule>
/app:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
/app/webroot:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/(app/webroot/)?(img|css|js|eot)/(.*)$
RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
I would just create a controller in CakePHP to handle all requests for myapp and render the static HTML as a view with a custom layout (if required).
Performance will not be an issue because the route for CakePHP will only be executed once. After that the AngularJS app is running and will take over all HTML5 routing locally in the browser.
While you can achieve what you want in .htaccess it limits you to running the CakePHP application on Apache. If you want to scale later to IIS or Nginx you'll have to recreate these rewrite rules.