I have a react js application with connecting API in Laravel. Everything is working fine in localhost. When I'm trying to host this application in my apache server I'm facing a problem.
Trying to achieve the below configuration:
My domain for react application is www.example.com
My domain for Laravel application is www.example.com/api
For this above URL set up
document root folder : /var/www/html
react folder : /var/www/html/react/build
laravel folder : /var/www/html/app/
My virtual host configuration is
<VirtualHost *:443>
# Client React application
DocumentRoot "/var/www/html/react/build"
ServerName example.com
SSLEngine on
# Server Laravel 7 API application
Alias /api /var/www/html/app/public/
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
# Rewrite all requests in /api to server index.php
<Location /api>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ /api/index.php [L]
</Location>
<Directory "/var/www/html/app/public/">
AllowOverride All
Options Indexes FollowSymLinks
</Directory>
</VirtualHost>
<virtualhost *:80>
DocumentRoot /var/www/html
</virtualhost>
Created .htaccess in /var/www/html/.htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
I'm getting error like 'The requested URL was not found on this server.'
Please help me. what I'm doing wrong in this configuration.
The same configuration is working for angular.
Related
could someone else help to me how I would configure apache/htaccess/reactapp in order to avoid the webapp crashes
My subdomain is eg. https://subdomain.example.com (it's working fine) the page loaded well if I refresh the page the page loaded well too. I think just right it is because the index.html is serving route home page.
But if I go to eg. https://subdomain.example.com/about (it's working fine as well) but here is the problem when I reload the page "Not Found - The requested URL was not found on this server". all pages after the domain crashes when I refresh the page
my htaccess
`
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
`
Server Ubuntu server 20.04
virtual host
`
<VirtualHost IP:443>
ServerName subdomain.example.com
DocumentRoot /var/www/my-app
<Directory /var/www/my-app>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
`
I just added this one in my htaccess root folder of ReactJS app
The credits for this guy: https://putridparrot.com/blog/react-router-dom-direct-url-or-refresh-results-in-404/
<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 need to create a virtual host or domain for my angular 2 application.
In brief, i had followed the below steps:
1) Created virtual host file for my site (From: https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-hosts-on-ubuntu-14-04-lts)
2) build the project in prod mode: ng build --prod (got dist folder)
These are my settings files from the above tutorial link that i had made in my server:
etc\apache2\sites-available\mydomain.com.conf
ServerName mydomain.com
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html/Angular2/path_to_my_app
<Directory /var/www/html/Angular2/path_to_my_app>
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order allow,deny
allow from all
</Directory>
In my windows host file added an entry to my site to map the ip
C:\Windows\System32\drivers\etc\hosts
10.*.*.* mydomain.com
In my server etc/host added an entry
etc\hosts
127.0.0.1 mydomain.com
In my angular 2 application's src folder (where index.html resides)
<IfModule mod_rewrite.c>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteBase /var/www/html/Angular2/path_to_my_app
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
And in the same folders index.html:
<base href="/var/www/html/Angular2/path_to_my_app">
My package.json has:
"start": "ng serve --host mydomain.com"
The created domain seems to load (hopefully, assuming deep links works), but when i hit mydomain.com, i get the angular2's folder structure view in my browser, not my site loaded
Where is my configuration incorrect.
Do i need to configure any other file in angular 2. If so which?
ServerName mydomain.com
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html/Angular2/path_to_my_app/src
in etc\apache2\sites-available\mydomain.com.conf, append /src to DocumentRoot
I created the project using Symfony framework, and when I am runing build in server in prod or dev env runs ok, But now I move project to debian server, install apache and create virtual host. It shows only directory list and not starts the app. I think that is something wrong with my virual host configuration. I am using Apache/2.4.10 (Debian) Server, PHP 5.6.19-0+deb8u1 (cli).
Here is the code for virtual host:
<VirtualHost *:80>
ServerName mose
ServerAlias 10.5.0.62
DocumentRoot /var/www/mose/web
<Directory /var/www/mose/web/>
AllowOverride None
Require all granted
Allow from All
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ app.php [QSA,L]
</IfModule>
</Directory>
# uncomment the following lines if you install assets as symlinks
# or run into problems when compiling LESS/Sass/CoffeScript assets
# <Directory /var/www/mose>
# Options FollowSymlinks
# </Directory>
# optionally disable the RewriteEngine for the asset directories
# which will allow apache to simply reply with a 404 when files are
# not found instead of passing the request into the full symfony stack
<Directory /var/www/mose/web/bundles>
<IfModule mod_rewrite.c>
RewriteEngine Off
</IfModule>
</Directory>
ErrorLog /var/log/apache2/project_error.log
CustomLog /var/log/apache2/project_access.log combined
</VirtualHost>
The right answer was AllowOverride All from Dawid Sajdak. Tnx for help
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>
I have an angular app that I'm serving locally using apache. My vhosts.conf is:
<VirtualHost *:80>
ServerName my.app.com
DirectoryIndex index.html
DocumentRoot /export/www/app
<Directory "/export/www/app">
order allow,deny
allow from all
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html/$1 [L]
</Directory>
</VirtualHost>
If I go to the root of the app everything loads fine. I do some navigation within the app which brings me to my.app.com/some/location and still no problem.
However if I reload the page at this point I get a 404 error. To get back to the point I want I need to either go back to the root and navigate via the app again or else search by url my.app.com/#/some/location
Is there something that I can do with a rewrite rule so that I don't need the hash to reload the route? I tried to edit my existing rule to:
RewriteRule ^(.*)$ index.html/#/$1 [L]
Any ideas greatly appreciated
C
The issue was that I was using a newer version of apache where the config rules have changed. My updated vhosts now reads
<VirtualHost *:80>
ServerName my.app.com
DirectoryIndex index.html
DocumentRoot /export/www/app
<Directory "/export/www/app">
order allow,deny
allow from all
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
</Directory>
</VirtualHost>
It's weird that my.app.com/some/location works. With AcceptPAthInfo ON, httpd would serve index.html and pass PATH_INFO of /some/location but that shouldn't do the right thing on the client-side JS.
The rewrite you attempted seems like it shiould replace your existing rewrite entirely. But, you'd want to redirect explicitly to non-relative /index.html and add the [R] flag to make sure the redirect goes all the way to the client. Otherwise, it's just an internal substitution, and you need your browser to read the # because that's only handled on the client side.