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
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.
Ive taken a copy of expressionengine from our production server to a dev server and its installed and running. I can access the admin console fine and Ive updated my paths.
The problem is that when I try and view my site the main page loads but no CSS is downloaded. The error Im getting is
The requested URL /presentation/layout was not found on this server.
I cant access the file from http://localhost/presentation/layout but I can access from
http://localhost/index.php/presentation/layout
Ive updated my .htaccess file from the following guide
https://docs.expressionengine.com/latest/urls/remove_index.php.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# Removes index.php from ExpressionEngine URLs
RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC]
RewriteCond %{REQUEST_URI} !/system/.* [NC]
RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L]
# Directs all EE web requests through the site index file
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>
I can access the site now from http://localhost without the index.php but its still looking for it for the CSS file. Any idea how I can resolve this?
First thing: don't put your css file in a template unless you absolutely have to.
You only need dynamical css files if the styles are depending on the data in a channel like
{exp:channel:entries}
.{title} {
color: #{color_custom_field};
}
{/exp:channel:entries}
If you put it in a template it will be processed by the template parser on every page view. This will add extra queries/processing which isn't needed for a static file.
What version of EE are you on?
All of us EE guys are over at https://expressionengine.stackexchange.com/ by the way
I am trying to modify my .htaccess file to run two different React websites at the same time, but they are both on the same domain.
Let's say I am serving /www. I want:
domain.com/website1 to load /www/website1/index.html
and
domain.com/website2 to load /www/website2/index.html
They are React sites using react-router, so I need every URL to forward to the respective index.html file for routing to work properly. For example, /www/website1/foo/bar should forward to /www/website1/index.html.
I am having trouble finding examples since I am not forwarding based on the domain.
My .htaccess file currently looks like this, which works for React sites because it forwards everything to /index.html:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
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.
When loading a page using Angular an Apache myserver.com everything works fine, when going to a subroute from the main page myserver.com/credits by clicking a link it'll work as well.
However, if I try to go directly to myserver.com/credits from the browser navigation bar it'll return a 404 error message:
I'm aware that by working with node I can configure this so that it does work, however, my company website runs in an apache server which I have no access to.
I could make it so the server redirects to the main page myserver.com like so:
.htaccess
ErrorDocument 404 /index.html
However the optimal resolution would be that going to myserver.com/credits works outright.
Is there a way to make Apache behave this way? And if so, how?
The answer that solves this question can be found here:
https://stackoverflow.com/a/22740184/1224232
I have flagged this question as a duplicate. I have tested it and it works perfectly.
Special thanks to Kevin B for directing me to the answer, and to Rajasaur for providing the answer.
Created a .htaccess file in root directory if not exist.
then add the following code in it
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]