After deploying my app on a Debian 11 Apache server within the folder var/www/html (specifically in var/www/html/foo), I encountered issues with routing and hard refreshing, resulting in a 404 error whenever I attempted to refresh a page.
The Angular app consists of multiple routes, such as:
site.com/items
site.com/map
site.com/item/4
...
To address this problem, I created an .htaccess file and placed it in the root directory (html).
.htaccess
RewriteEngine On
RewriteBase /
# Serve existing assets or directories as they are
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# Use index.html for non-existing resources
RewriteRule ^ /index.html
As var/www/html is a shared folder with other apps (e.g. var/www/html/bar1, var/www/html/bar2) that I do not manage, I also created additional .htaccess files with RewriteEngine Off in those app directories to avoid conflicts.
Here is the tree structure of my folder for clarity:
var/www/html:.
│ .htaccess
│ ...
│ ...
├───foo (my app)
├───bar1
│ │ .htaccess (RewriteEngine Off)
│ │ ...
└───bar2
.htaccess (RewriteEngine Off)
...
Despite these efforts, the .htaccess did not resolve the hard refresh issue when using site.com/foo.
In testing, I duplicated the foo subfolder under var/www/html/foo, minus the
.htaccess</code file, containing the Angular app's <code>distsite.com/foo/foo worked without any hard refresh problems, while accessing site.com/foo resulted in the issue resurfacing.
To provide more context, here is the hierarchical structure:
var/www/html/foo:.
│ .htaccess
│ favicon.ico
│ index.html
│ main.js
│ main.js.map
│ polyfills.js
│ polyfills.js.map
│ runtime.js
│ runtime.js.map
│ scripts.js
│ scripts.js.map
│ styles.css
│ styles.css.map
│ vendor.js
│ vendor.js.map
│
├───assets
│ │ ...
│ ├───img
│ │ ...
│
└───foo
│ favicon.ico
│ index.html
│ main.js
│ main.js.map
│ polyfills.js
│ polyfills.js.map
│ runtime.js
│ runtime.js.map
│ scripts.js
│ scripts.js.map
│ styles.css
│ styles.css.map
│ vendor.js
│ vendor.js.map
│
└───assets
│ ...
├───img
│ ...
The identical nature of the folders led me to believe that the issue lies in the .htaccess configuration. Any insights on why this discrepancy occurs and how to rectify the hard refresh problem in the initial foo folder would be greatly appreciated.
Additionally, I wish to relocate the contents of foo to the html folder to have my app accessible at mysite.com. Is it safe to retain the .htaccess in the root directory (html)?
Thank you for your assistance!