I am hosting my Angular 2 app on http://www.ixwebhosting.com/
They provide a traditional LAMP stack.
I have a route like this: www.mysite.com/myapp/item/:id and it works fine in my local ng serve environment.
The index.html page at www.mysite.com/my-app/ loads fine - but when I enter www.mysite.com/my-app/item/1 into the browser it fails. I suspect because the routing hits the web server first - and since the web server can't find an actual directory or file at that location it returns a 404. Is there a way to config an Apache server to work with Angular routing?
Yes, just redirect all requests directed to a file that doesn't exist to index.html - something like WP does:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /my-app/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
</IfModule>
Of course, this .htaccess file should be placed in "my-app" folder.
Related
I have an Ubuntu server with Apache2 where I need to host a React-router app among other web apps, (php, NodeJs).
The problem I'm facing is that I do not know how to tell react that the whole app is in a specific path, e.g., '/var/www/html/react_app_one/'
I changed the package.json to add the "homepage" attribute to '/react_app' and also changed the <Router basename={'/react_app'}> and it seemed to work, when I type 'https://server/react_app/' in the browser, the app "works" but if I am in a route like 'https://server/react_app/users' and reload the page the server returns the 404 screen.
I also added an .htaccess in the public folder and made sure it was in the build:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /react_app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /react_app/index.html [L]
</IfModule>
But didn't worked.
In my "/etc/apache2/conf-enabled" there is a file that configures a reverse proxy for a NodeJS app, so I added the configuration in this file; in one of many tests, my react app worked but the other apps stopped working... I do not know what else to try...
Thank you in advance for any guidance.
I need to host my react project in a sub-folder of a domain. e.g. mydomain.com/react-project/
In the project, I am using react-router library for routing. I have this .htaccess file in the react-project folder to make work the router.
<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>
For the home page, the project working fine. But for other URLs, the server shows the default apache "not found" page.
I tried to create a .htaccess file in the root folder of the server.
ErrorDocument 404 /react-project/index.html
With this .htaccess file, I wanted to redirect the browser to react projects index.html file. But it didn't work.
May be this is because of Client side, Server side routing issue.
I think when you refresh the page it shows 404 not found on server.
You can check this answer for help. Also use HashRouter instead of BrowserRouter and add basename={"/subdirectory"} in Routes.
I'm new to web-hosting and cPanel, so please be nice to me...
I have built a website using react and managed to upload its build file to cPanel. It seems to work fine, however, whenever I try to switch between pages, I get a 404 error, although the pages clearly exist (for example, when I press a button to switch to mydomainname.com/about-us). The switching works perfectly locally using react-router..
I would really appreciate it if someone could help me solve this problem!
Thanks in advance!
This is because ReactJS uses client side routing.
To fix 404, create a .htaccess file and paste below contents and upload it to your site root. It should work.
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
If the above did not work, try below (recommended by ReactJS team), either one of this should work
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
The switching works perfectly locally using react-router
Routing works fine with the inbuilt ReactJS web server but not with Apache web server. Also make sure you are using react router Link component to navigate between pages and not the html anchor (a) tag.
You have to redirect all the requests to your index.html. You can edit the .htaccess for that. use <Link> from react-router to make redirections.
Follow these steps and you will be fine
Specify your homepage in your package.json file like this
{
"name": "yourappname",
"homepage": "http://example.com",//add your domain here line
"private": true,
"version": "0.0.0",
}
2.Build your app by running yarn build or npm run build
3.Then copy the contents of your build folder and paste them on public_html folder in your cpanel
3.Go to your Cpanel file manager public_html folder and edit .htaccess file or create new one if it does not exist. and paste this there
<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>
Note the .htaccess for this should be at the same level with the contents of the build folder.
Save and your are done
Below is the issue that I am facing and needs some help.
Initial problem:
I have a tomcat server where I have deployed three angular projects (inside the web apps folder).
When I start the Tomcat server, the angular apps come up. Once I login to the APP and navigate through the pages and then try to refresh any page inside the angular app it gives me a 404 error.
The solution to the initial problem:
I got a solution to resolve the above issue as given below:
adding the below parameter to the "server.xml" file inside the Tomcat config folder.
Parameter:-
I created a rewrite.config file inside the /config/Catalina/localhost/ folder and wrote rewrite rules for all the 3 angular apps.
New Problem:
Only one of the Angular APP is coming up but all the other application's index.html pages are not loading and in the logs I can see 304 error.
Questions: Can someone please suggest how to write multiple rewrite configs for the different angular project in the same tomcat rewrite.config file.
More Details: Angular apps are in the location:
Tomcat path/webapps/app1
Tomcat path/webapps/app2
Tomcat path/webapps/app3
rewrite.config file content:
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app1/(.*) /app1/index.html
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app2/(.*) /app2/index.html
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app3/(.*) /app3/index.html
Only app1 is loading but app2 and app3 index.html pages are not loading and tomcat logs have 304 for app2 and app3.
Please suggest how to write the rewrite rules for multiple angular applications.
Are you sure that just first one and not just third one is served correctly in your case? Because I think you are missing RewriteRule flag [L] ...last rule:
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app1/(.*) /app1/index.html [L]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app2/(.*) /app2/index.html [L]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/app3/(.*) /app3/index.html [L]
I've got an AngularJS app running on top of CakePHP 2.6. I'd like to enable html5mode in Angular so I don't have to include a # in URLs, but doing so requires configuring some .htaccess files so that all requests hit index.html.
Not all of my web app is Angular yet, so I can't just redirect everything to index.html- instead, I'd like to set things up so that all requests to a certain subdirectory (and its subdirectories) redirect to that subdirectory's index.html.
CakePHP has a folder structure like this:
/ // Server web root directory: index.php, etc
----/app // The directory containing the actual Cake app
----/webroot // Web assets used by the Cake app
----/myapp // Where I'd like to store the index.html for my Angular app
I'd like to get this set up so that any requests to /myapp or its subdirectories get automatically redirected to /app/webroot/index.html. Does anyone have any ideas about how to go about this?
My current .htaccess files:
/:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
</IfModule>
/app:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
/app/webroot:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/(app/webroot/)?(img|css|js|eot)/(.*)$
RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
I would just create a controller in CakePHP to handle all requests for myapp and render the static HTML as a view with a custom layout (if required).
Performance will not be an issue because the route for CakePHP will only be executed once. After that the AngularJS app is running and will take over all HTML5 routing locally in the browser.
While you can achieve what you want in .htaccess it limits you to running the CakePHP application on Apache. If you want to scale later to IIS or Nginx you'll have to recreate these rewrite rules.