Angular 2 app on Apache server - angularjs

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 :)

Related

Why React Application doesn't work in hosting subdirectory?

I have a React app with the react router.
After build I try to start react app on my hosting server.
App is working in root directory /example.com correctly.
But I want to run it at subdirectory like /example.com/sub and it doesn't work.
It's possible, problem in .htaccess file.
Here's .htaccess content
<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>

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

Setting .htaccess file for my react project

I have deployed two react builds on cpanel, basically one is admin panel and second website like this:
admin folder consist of build of admin panel working on /admin route.
client folder consist of build of website working on / route.
My .htaccess Code:
<IfModule mod_rewrite.c>
RewriteEngine on
# first check if request is in /client/
RewriteCond %{DOCUMENT_ROOT}/client%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}/client%{REQUEST_URI} -d
RewriteRule ^(.*)$ /client/$1 [L]
# then check if request is in /admin/
RewriteCond %{DOCUMENT_ROOT}/admin%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}/admin%{REQUEST_URI} -d
RewriteRule ^(.*)$ /admin/$1 [L]
</IfModule>
After long searching I found this code as solution for my app as two react apps are deployed in cpanel. The problem is that whenever I refresh on any route page gives 404 error although routes work perfect. Please Help.
I'm using these rules for my react applications, in my cases I have one react application not two
<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>

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]

Angularjs and apache rewrite doesn't work on subfolder

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

Resources