I have my react website on my ubuntu server where apache2 is installed.
I already added a .htaccess file with the code FallbackResource /index.html
and I also changed the /etc/apache2/sites-enabled/000-default.conf file.
My website is also working to a certain level because when I open the url : my_domain.com/login
everything is working.
But if I open a url like: my_domain.com/login/verify my website only shows a blank page.
Why?
I also changed my .htaccess file to :
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
still not working
This is my console if the page is blank:
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
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
I have create a bundle of react project by npm run build and create a virtual host file which is pointing to build folder, the application is working fine with different route, but when I page refresh other then root route then page not working.
This image is without page Load:
https://i.stack.imgur.com/EnBOU.png
But after page load it giving me this error.
https://i.stack.imgur.com/GooRM.png
Hi Please make base href on build index.html file inside head tag like this.
<base href="/reactapp/" /> // your root folder path
and add a .htaccess file in the root, paste below code inside the .htaccess.
<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>
I hope it's useful for you.
Thanks