Angularjs and apache rewrite doesn't work on subfolder - angularjs

I'm trying to use AngularJs with html5mode enabled, and to be able to use it i need to enable a rewrite i need an .htaccess to point to the folder.
When going to the root index, there is no problem, everything works fine. But when i try to redirect to a subfolder where there is another section, i keep getting errors. For example, i have an admin section to publish news, etc.. So to access this portion of the app i need to go to a subfolder called /adm like this www.site.com/adm and this is where the errors starts.
This is my .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
And this is the errors I'm getting:
Uncaught SyntaxError: Unexpected token <
When looking further, i see this is point to the index on the root. I know it has something to do with the .htaccess file, but i don't how to create a rule to identify if it's a root folder or sub folder and create the proper rewrite rule.

Try this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^(adm/)?index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(adm/)?. /$1index.html [L]
</IfModule>
What this does is rewrite everything inside /adm/ to /adm/index.html and everything else to /index.html

Related

Configuring htaccess file for React Router on Apache Server

I have deployed a React app with React Router to my Bluehost server, and need to configure the htaccess file to redirect all of my routed URLs (/portfolio, /about, etc) to index.html instead of trying to fetch a new file from the server and throwing a 404.
I have read about countless similar problems in which the solution seems to be to add this into your htaccess file:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
I tried this, but I am still getting 404's when I try to visit any page of my site directly that isn't the homepage. I'm wondering if there is anything else in my existing htaccess file that is preventing the above code from working?
There was some code already in there from Bluehost, and I see another IfModule statement, so I'm wondering if that one is overwriting the first one. However I am afraid to edit it and break something, as it clearly says "do not edit." Here is my full htaccess code:
Header always set Content-Security-Policy: upgrade-insecure-requests
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php74” package as the default “PHP” programming language.
<IfModule mime_module>
AddHandler application/x-httpd-ea-php74 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit
# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
# END WordPress
Any ideas? I've double-checked that my BrowserRouter is set up correctly and also tried a few other htaccess configurations. I want to avoid using HashRouter or Node if possible but am getting frustrated. I can provide my React code as well if needed, but I'm pretty sure the error is not with the React setup.
You can create a virtual host file in the /etc/apache/sites-available folder and add this:
<VirtualHost *:8080>
ServerName example.com
DocumentRoot /var/www/httpd/example.com
<Directory "/var/www/httpd/example.com">
...
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]
</Directory>
</VirtualHost>
This worked for me

what should I put in the .htaccess file to deploy my site on hostinger?

I'm deploying my first project on Hostinger. It's a React app created according to the basic config given on reactjs.org. I have uploaded my entire folder to the server via FileZilla and am now trying to configure my .htaccess file but I am only getting 500 errors back. I put this file in my folder called react-portfolio but nothing works. The whole project is stored in the react-porfolio folder.
here is what I tested first
DirectoryIndex /react-portfolio/public/index.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ react-portfolio/public/$1 [L]
</IfModule>
here is the second file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
Thank you

How do I configure my .htaccess file for React App in Subdirectory?

I want to host my react app in a subdirectory on my shared hosting account. Ie in the directory domain.com/mydirectory/. But when I type domain.com/mydirectory/ in the search bar it opens the index of the directory & not the React App itself.
I have already created a build version for my app. Hence the index.html file is at the root of the directory with the static folder & all the other contents that where created during the react-build script.
How can I make it work properly ? How can I configure my .htaccess file or what fix should I consider ?
You can try to add a .htaccess file in your React directory with that source code into it.
<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>
Just copy and paste following in your .htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Ignore folders in htaccess

I'm making a webapp using AngularJS. For routing, I used a htaccess rewrite rule to allow direct access to routing pages (for example going directly to /settings). However there is one folder I would like to exclude from this rule, so I can check if a file exists (now every URL returns 200). I've tried every combination of rewrite conditions and rules I could find, but no luck.
So far this is my .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
#Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_URI} !(orders)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
</IfModule>
ErrorDocument 404 /404.php
I would appreciate any help
EDIT:
I would like to exclude all files and folders under orders
Try
RewriteCond %{REQUEST_URI} !^/orders [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
%{REQUEST_URI} always starts with a / and because you aren't specifying something like .* at the beginning of the regex, you have to have the slash. I also added the [NC] flag so that a url like "/ORDerS" would be skipped as well.

Angular 2 app on Apache server

I have an angular 2 app served on Angular 2. On the host, it is located at the document root and everything is working fine. I have an .htaccess file with:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Problem:
On my laptop, i have an Apache server (xampp) with document root as "
c:\users...\WebProjects
When i develop the site, i put the files in c:\users...\Projects\Projects1\dist
In this directory, i cannot get the website to work due to files/folders called not being in the root. ie Server is trying to load \css\app.css when it should be loading Projects1\dist\css\app.css
Can i write a specific .htaccess to be able to serve the app from that directory? (or something else without having to change the httpd.conf document root?)
thanks
you need to add the path in your .htaccess file and your index.html file like so:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /your/path/here/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
In index.html, you need to update the base href aswell to reflect the path like so:
<base href="/your/path/here/">
And that should do the trick :)

Resources