AngularJS HTML5 mode routing with apache2 .htaccess - angularjs

I am building angularjs project with PHP, MySQL, apache2 on Ubuntu system
Project structure
var/www/html/demo/
Demo folder is my project folder,
demo=>js(All js file), index.php, addstudent.php file etc
I am facing problem while refreshing the whole page and also using routing concept in AngularJS with html5Mode(true) but it doesn't working properly with .htaccess file.
The requested URL /demo/addstudent was not found on this server.
htacces code here
DirectoryIndex demo/index.php
RewriteEngine On
RewriteBase /demo/
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.php [L]
In index.php added base ref is

Related

Host react project in a sub-folder of a domain

I need to host my react project in a sub-folder of a domain. e.g. mydomain.com/react-project/
In the project, I am using react-router library for routing. I have this .htaccess file in the react-project folder to make work the router.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectory
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
For the home page, the project working fine. But for other URLs, the server shows the default apache "not found" page.
I tried to create a .htaccess file in the root folder of the server.
ErrorDocument 404 /react-project/index.html
With this .htaccess file, I wanted to redirect the browser to react projects index.html file. But it didn't work.
May be this is because of Client side, Server side routing issue.
I think when you refresh the page it shows 404 not found on server.
You can check this answer for help. Also use HashRouter instead of BrowserRouter and add basename={"/subdirectory"} in Routes.

Does Angular routing work on LAMP server

I am hosting my Angular 2 app on http://www.ixwebhosting.com/
They provide a traditional LAMP stack.
I have a route like this: www.mysite.com/myapp/item/:id and it works fine in my local ng serve environment.
The index.html page at www.mysite.com/my-app/ loads fine - but when I enter www.mysite.com/my-app/item/1 into the browser it fails. I suspect because the routing hits the web server first - and since the web server can't find an actual directory or file at that location it returns a 404. Is there a way to config an Apache server to work with Angular routing?
Yes, just redirect all requests directed to a file that doesn't exist to index.html - something like WP does:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /my-app/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
</IfModule>
Of course, this .htaccess file should be placed in "my-app" folder.

how to hide id from the url of the angularjs website

my current URL is:http://xyz.services/50/home.
i want to change this URL to http://xyz.services/.
can anyone help me how to do this.50 is the id of the page.
the whole content of the page come from the database.
below is my .htaccess
RewriteEngine on
#RewriteRule /(.*)/(.*)/$ pages.html?menu_id=$1&page_title=$2
#RewriteRule /(.*)/(.*)/$ page.php?category=$1&product=$2
# 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]
Have a look at How can i hide the full url of my website?
This is not angular specific, but more of a configuration on the server you are deploying to.

.htaccess and CakePHP: Creating a directory for use with Angular-UI router

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.

HTML5 Mode AngularJS ui.router

Hi I want to use html5 mode. My file structure is as the following:
mypage.de/mysub
I can only mess around in mysub.
So far, I added into my index.html:
<base href="/mysub/">
And created a new (and the only one) .htaccess in /mysub/
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]
If I use an url:
mypage.de/mysub/#/site1 it is transformed into mypage.de/mysub/site1 and loaded
But if I use the transformed url directly, e.g.: mypage.de/mysub/site1 I get a 404
The server is an apache:
I looked into that tutorial:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
But I'm not sure what server-name is & if /path/to/app is
/
or
/mysub/
Also it throws my already an internal server error when I just leave the virtual host & the part within the directory tags.
because the .htaccess is within the directory. I tried diff. varaitions but nothing worked here so I just used the part within Directory as mentioned here:
AngularJS: can't get html5 mode urls with ui-route $state
Try this
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteBase /mysub/
# 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]
</IfModule>

Resources