Scenario
I am using BrowserRouter routes in my react app. So if my base were "localhost:3000/site1" then a virtual page might be "localhost:3000/site1/route1". This works fine in development but not on an apache server.
The Problem
I'm assuming that the react dev server always sends requests to the main index.js / router whereas on an apache server it's actually looking for a page called site1/route1. If I refresh a page while it's in a virtual location then I get a "Page not found" error from apache.
Question
How do I get my virtual routes to work with my production react build when it's on a php server? Do I need to add some redirect magic via a .htaccess file?
I solved this by using an apache friendly .htaccess file in my project folder
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} /([^/]+)/?$ [NC]
RewriteRule .* rel-path/to/project/build/index.html [L]
The "build" in my path is the build folder created by npm run build - part of the reason I put the .htaccess in my project folder is so if anyone peeks into my project folder they will immediately be sent to the build/index.html
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.
Hey has anyone experienced issues with react-router on a production build. I'm running a LAMP server and I've built my project put it in the http folder and when I go to a page I get Object not found!. I have setup react-router to go to certain pages based on certain conditions if I go to the root of the server i.e. localhost/ it loads the main page but then if I click on links it works fine as soon as you try and manually go to a link by typing in the search box I get the error message Object not found
This is my .htaccess 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>
You need to configure your server to return index.html if file not found (404).
Example:
Let's say you have /users route the will show your users list.
It will be ok if first you'll go to / (which will return index.html by default) and then click some router link and it will redirect you to that page. It will work because you wont make any additional requests to the server.
But if you go to /users first - you'll request it from the server. In that case server will try to find users file and it will not be there.
If this configuration is not possible consider using hash router. The url will look like this /#/users
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 have created a test application on my Mac. After I run npm run build, it created a build directory. Here starts the problem.
I have uploaded build directory to linux running an apache server. But i don't see it working. Do i need to install node, npm or upload whole directory to get it working?
The strange thing is, after i upload the build directory to the root of web server, I only see the first page. I am using react-router and first page renders the first component. example.com works fine but example.com/browse or example.com/fruit/apple does not work. Think of that you are missing htaccess file.
So are there any docs to show how can i make this work? Because when i search for deployment the only think i see is npm run build and serve
I have solved the problem adding the following .htaccess file to my root directory
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]