Configuring Apache to rewrite urls to index.html in root directory - angularjs

My AngularJS application is using html5 mode for pretty urls. The urls on my local environment work but typing full urls directly into the browser causes my test server (set up on Heroku) to respond with 404 "Not Found" errors.
Examples:
1) Typing "localhost/log_in" or "localhost" directly into the browser results the login page.
2) Typing "localhost/fkjdlfdsaf" or any other url that begins with "localhost/" directly into my browser results in the login page.
3) Typing "myapplication.herokuapp.com" (test environment) directly into the browser also results in the login page.
4) Typing "myapplication.herokuapp.com/log_in" (test environment), however, incorrectly results in a 404 "Not Found" error.
It seems like the test environment server hasn't loaded [root dir]/index.html since the file contains scripts (including a route that serves the "login" page if the url doesn't match any other routes).
Can somebody tell me what I'm missing on my test server? I prefer solutions that modify the "httpd.conf" file over using a .htaccess file.
Snippet from httpd.conf on local server:
DocumentRoot "C:/Sites/myApplication"
<Directory "C:/Sites/myApplication">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
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>
To configure web servers on Heroku, I created two files, procfile.txt (see this and this) as well as apache_app.conf (see this).
procfile.txt (heroku):
web: vendor/bin/heroku-php-apache2 -C apache_app.conf
apache_app.conf:
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]

Related

Error 403 forbidden when using React Router with Apache

When I deploy my website built with React and React-router the landing page of my website works fine but when I try to navigate into my website I run into 403 forbidden response. I use Apache as an HTTP server and the general config of my server is the following :
<IfModule mod_php.c>
php_value date.timezone Europe/Brussels
</IfModule>
<IfModule mod_userdir.c>
UserDir /var/www/users/staff/*
</IfModule>
For your information, the website is located under /var/www/projects
I added the following .htaccess to my project :
<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>
Despite those configurations the 403 forbidden error when navigating in pages managed by react-router. Did I miss some configurations?
It seems that the settings you have applied are not enough, You should change some parameters in apache.conf too...
open the apache main config file, Its path varies depending on your distribution, that's located in one of these locations:
1- /etc/apache2/httpd.conf
2- /etc/apache2/apache2.conf
3- /etc/httpd/httpd.conf
4- /etc/httpd/conf/httpd.conf
look for "AllowOverride" parameter like the example below:
<Directory "/var/www/blahblah">
AllowOverride All
</Directory>
And give the "All" value to that.
Then create a .htaccess file in the root folder of the webserver & set the following configs:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
NOTE: Before performing these things you have to enable the rewrite module, By entering the following commands you can do this:
debian base: sudo a2enmod rewrite
centos: uncomment mod_rewrite.so in /etc/httpd/conf/httpd.conf
Finally, restart your web server... Now expected there is no anymore problem.
If you got any permission/server error take a look at the webserver logs which are located in one of these locations:
1- /var/log/httpd/
2- /var/log/apache2

React-router typed-url and refresh on tomcat, elastic beanstalk

There are a lot of questions about this topic which is that typed URL and refresh do not work when using react on production but I'm trying for a long time now and for some reason it does not work.
I'm using React with Spring boot and tomcat. I am using BrowserRouter for routing. I deploy the application on aws elastic beanstalk. When I deploy, I do the following:
run npm run build then copy the resulting files in build folder into webContent folder then export project as war file and deploy it to aws.
As I understood, the main solution for this is to server the index.html file for all requests and I tried the following to do that:
- add the following to /etc/httpd/conf/httpd.conf
<VirtualHost *:80>
DocumentRoot /var/lib/tomcat8/webapps/ROOT/
ServerName domain.elasticbeanstalk.com
AliasMatch ^/(.*)$ /var/lib/tomcat8/webapps/ROOT/index.html
<Directory "/var/lib/tomcat8/webapps/ROOT">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^/(.*)$ - [L]
RewriteRule ^/(.*)$ /index.html [L]
</Directory>
</VirtualHost>
From the questions I read, it is suggested to use /var/www/html but I did not get why. I tried to use it by copying everything from ROOT to it but also did not work.
I tried many variations to the code I put in the configuration file.
With the configuration, I get the error
SyntaxError: expected expression, got '<'.
On firefox, I get The script from “http://awsdomain.com/static/js/2.7322c0fb.chunk.js” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type.
and on chrome I get same error but with css files and not js.
At this point, I assume the serving of index.html is working but there is another issue that the server is trying to parse some js or css files like html or text which would not work. In any case, I have no idea how to tell the browser to parse them in the right way and why is it parsing them with no errors in the normal way (without solving the routing issue)?
I tried to add type attribute to link and script tags in index.html but did not work.
There are many stuff I tired specially in the config files on aws instance but it would be hard to put it all here. I'm hoping from the comments to get the root of the problems and then I can give any missing information.
My problem is finally fixed.
The following is my final addition to the httpd.conf
<VirtualHost *:80>
DocumentRoot /var/lib/tomcat8/webapps/ROOT/
ServerName domain.elasticbeanstalk.com
<Directory /var/lib/tomcat8/webapps/ROOT>
Options FollowSymLinks MultiViews
AllowOverride All
Require all granted
DirectoryIndex index.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
</Directory>
</VirtualHost>
Also, it was annoying that dir_module was not included by default which is needed by DirectoryIndex. To include it, add LoadModule dir_module modules/mod_dir.so.

Html5 mode with Hashbang Route for direct url on pages

I'm using AngularJS for my Portfolio. I would like to make it compatible and crawled entirely by Googlebot. So, I tried to set the html5 mode in the config.
The '#' is now gone but I can't access to pages directly. Server send me a 404.
I'm using an Apache server. I normally configure my server to route request on index with the .htaccess.
My portfolio is already on a server My portfolio
You can see the code on my github Here
you need to configure your server so that it redirect all routing requests to angular...
read here
How to: Configure your server to work with html5Mode
in apache
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
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>

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>

Bad base path when browser refreshes, ngView breaks

When I access my page from the index and start browsing everything works fine, but when I am on a route other than / for example in /details/123 and I refresh the page(I have URL rewriting configured) the route is not properly set.
It means, when I check the location path when browsing normally from the index and I am on /details/123 the location path is /details/123 as expected but when I refresh the page and I am still on /details/123 the location path changes to /123 causing ngView to display the wrong view.
I am using html5 mode and Angular v.1.1.5
UPDATE: I created a simple example here to illustrate the problem.
I don't have any special setup, I don't think is a server issue. I have the same problem with a different app in python where the redirection is done inside the application.
The .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.php
</IfModule>
This may be related to a nasty issue that showed up during Angular 1.1.5 and is a bug in the core library. A solution that has worked for many is to add the following tag to your index.html head.
If your application is running at the root of your domain.
<head>
...
<base href="/"></base>
...
</head>
Or if your application is running in a subdirectory, specify that subdirectory (e.g. 'myapp'):
<head>
...
<base href="/myapp/"></base>
...
</head>
Additionally, you may also try a new set of rewrite rules. This configuration has worked for many ui-router users.
<IfModule mod_rewrite.c>
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]
</IfModule>

Resources