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

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.

Related

What is the proper setup of an .htaccess file for headless WordPress and React site

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.

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.

Handling URL routing with Apache and React Router

I have a pair of apps which will be running on a shared Apache host. The apps are housed in a common directory on the server. Each application is housed within a "build" directory within its main directory. The client directory should be the default display, while admin should display at example.com/app/admin. And, to further complicate matters, admin uses React Router for its internal routing.
Here's a visual representation of the goal:
admin
|- build
|- index.html (example.com/app/admin, example.com/app/admin/page1, etc.)
client
|- build
|- index.html (example.com/app)
.htaccess
So I need to load the target pages while also enabling React Router to handle the routing for admin. I've tried about every combination of RewriteCond and RewriteRule I can think of in the .htaccess, but no luck so far. I feel like I'm getting closer with the rules below, but I'm still not quite there.
// .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/admin/build
RewriteRule ^admin$ admin/build [L]
RewriteCond %{REQUEST_URI} !^(/client/build|/admin)
RewriteRule ^(.*)$ client/build [L]
</IfModule>
This shows /build in the address bar, and any request to /admin/(.*) fails to redirect the .css and .js file requests to the build folder (so it is instead looking for /admin/static/css/ instead of /admin/build/static/css), although they load successfully on requests to /admin.
EDIT: Changed "App1" to "client" and "App2" to "admin"; masking those serves no purpose, and the fact that the directory shares a name with the page might somehow be relevant.
Finally got this sorted out. Final rewrite below.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} -f
RewriteRule .* - [L]
RewriteCond %{REQUEST_URI} !^/app/admin [OR]
RewriteCond %{REQUEST_URI} ^/app/admin/build
RewriteRule .* - [S=2]
RewriteRule admin/\w*/?$ admin/build/index.html [L]
RewriteRule admin/(.+)$ admin/build/$1 [L]
RewriteCond %{REQUEST_URI} !^(?:/app/client/build|/app/admin/build)
RewriteRule ^(.*)$ client/build/$1 [L]
</IfModule>

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.

cakephp .htaccess configuration on godaddy with subdomain

I have one domain on godaddy (www.mydomain.com). I have placed my cakephp application on this domain. It is working fine for me.
But i have created a subdomain blog.mydomain.com for this godaddy has created a directory named blog inside the www.mydomain.com now how can i redirect the request coming for blog.mydomain.com to the blog/ folder.
I am trying this,
RewriteEngine On
RewriteCond %{HTTP_HOST} ^blog.mydomain.com$
RewriteRule ^(.*)$ blog/$1 [L]
RewriteCond %{HTTP_HOST} ^mydomain.com/$
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
It works for single Rewrite condition like,
RewriteEngine On
RewriteCond %{HTTP_HOST} ^blog.mydomain.com$
RewriteRule ^(.*)$ blog/$1 [L]
But when i add another rewrite condition for my cake app it shows 500 Internal server error for blog.mydomain.com
Please help me out .............
Put the blog folder in webroot (under your cake directory) and it should work just fine. Or did you need to do something else more fancy?
Try this: http://digitalmemo.neobie.net/2011/04/19/cakephp-bypassing-for-subdomain/
It use to make all the subdomains to be working correctly instead of defining each of the subdomain.

Resources