I'm hosting my React app on hostgator which uses Apache. In order to enable refreshing of the page without getting 404 not found I need to create and edit an .htaccess file which looks like this right now:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /index.html [L]
</IfModule>
What happens when I refresh the page on a subpage (/some-sub-page) is the index.html renders but the URL resets to root.com (without the /some-sub-page).
I want the index.html to render, but I also want to keep the url in order for React Router to kick in and serve the correct components.
I've gone through the Apache documentation as well as threads about .htaccess editing but none seems to cover the problem with the URL resetting.
How would one go about that?
Best regards.
Related
The homepage/base url of the app can be refreshed with no issues. but other pages return 404 on page refresh. Please are there any work around for this?
Here is a screenshot of the 404.
[1]: https://i.stack.imgur.com/lc8xD.png
It happens because Vue routing is only on the frontend side. So when you refresh the page it goes backend server. And it checks for any files to satisfy the request.
To solve this issue. You have to tell your apache webserver to handle it for your front end Vue app.
Try adding this to your .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
The solution that worked for me:
In /etc/apache2/sites-available/"yourAppDomain".conf add to the end:
FallbackResource /index.html
</VirtualHost>
Page refresh returns 404 error VueJs (mode:history) with Laravel:
The solution that worked for Laravel:
Assuming your entry point is the index method, you just need to add this route at the bottom of your routes/web.php file.
Route::get('{any}', function () {
return view('welcome');
})->where('any','.*');
I deployed a simple Vue.js website to a shared hosting plan. The website consists of a few internal links that use the router. Links such as /contact or /about.
I read that I need to use a .htaccess on shared web hosts so the router can navigate between its paths. Indeed, I added this code in the .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>
One thing I noticed is that the router can navigate between its internal links, for example if I'm on the www.domain.com and click on the contact link, it goes to www.domain.com/contact and the page opens up.
However www.domain.com/contact doesn't exist in reality because if I type it out manually in the browser's address bar (without accessing it via a link on a page), then I get a page not found error. That sucks because Google probably won't be able to index my page then.
Is there any way to fix that?
The server is also running PHP. It has a PHP website on it beside the Vue.js one. I think I will need to touch the .htacess in the root folder instead of the one in Vue.js's dist folder.
The .htaccess in the root folder (the one in the root domain) looks like this:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php
Is there a way not to remove those? but also add the Vue.JS rules?
I am trying to set up a Nuxt app using #nuxt/pwa starter-template for Server Side Rendering on a Shared Hosting.
However my Nuxt app is running on "http://localhost:50000". I am trying to show the running app from "http://example.com" by Rewriting Rule in .htaccess.
When trying to access "http://example.com" it's showing 404. Without the "Index (/)" route every other route is fine. Even coming to "Index (/)" route from any other route is also OK. Only showing 404 when trying to load the "/" route directly.
Eg:
http://example.com Doesn't work
http://example.com/contact Works fine
*** There is already an issue exactly like mine at Github: https://github.com/nuxt/nuxt.js/issues/2625
But I couldn't found anything helpful from there.
Here is the .htaccess file I am using. --
Options +FollowSymLinks
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]
</IfModule>
Can somebody help me out with this issue??? Thanks in advance!
It seems to be a bit late for this answer, but I only found it in github and would like to help anyone who finds this topic with the same problem.
This htaccess is working for me, it loads the index.vue page normally when I refresh and the navigation works.
Replace my-domain with your domain.
RewriteEngine on
# Forcing all incoming requests to HTTPS.
# HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(.*.(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http://127.0.0.1:3000/$2" [P,L]
Use my .htaccess code:
RewriteRule ^index.html.var$ http://127.0.0.1:3000/ [P]
RewriteRule ^(.*) http://127.0.0.1:3000/$1 [P]
This problem has also troubled me for a long time.
I added _index.vue dynamic vue-router and,
validate ({params}) {
console.log (params.index);
}
The terminal outputs "index.html.var".
So I was thinking that when we visited the homepage, Apache sent a proxy, but the request URL received by nuxt.js was not "/" but "index.html.var".
A little late to this party but if anyone is experiencing the same issue, what fixed it for me was to disable DirectoryIndex in .htaccess.
RewriteEngine on
DirectoryIndex disabled
RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]
RewriteEngine on
Forcing all incoming requests to HTTPS.
HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(..(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.) "http://127.0.0.1:3000/$2" [P,L]
Work for me.
I'm using a php app called Yourls. It's a self-hosted url shortener and it's pretty great, I'm happy with its overall functionality. Due to the nature of its development however there isn't much in the way of support. Let's pretend the base url is af.to, where a shortened url would be af.to/goo that might redirect to whatever url is defined by 'goo'. The problem I'm facing is that if someone goes to af.to, they end up on a 403-Forbidden. I'd rather the client is redirected to a specific url instead. I have already picked up a plugin for Yourls which redirects to a url when a shortlink is not found or mis-typed, but this does not cover the base of af.to
I attempted to put in a 403 redirect in the .htaccess, but that broke the whole yourls script resulting in a 500 server error.
Current .htaccess looks like this:
# BEGIN YOURLS
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /yourls-loader.php [L]
</IfModule>
# END YOURLS
Any help on what I need to do?
Thank you.
The RewriteCond blocks tell the RewriteRule to skip existing files / folders. When you go to http://af.to/, the root folder exists : no redirection. The apache server doesn't find any index.html (or index.php) file, isn't allowed to list the content of the folder, give up and returns a 403 Forbidden.
You can create the index.html file to show some content or you can add these lines to redirect to an other url :
# just after RewriteEngine On
RewriteRule ^/$ http://my-compagny.com/ [L,R=301]
I've been having this issue for quite some time. Right now we are using a shared hosting plan and have four domains, one of which points to a symfony project. My goal is simply to omit having the app.php included in the URL. Without any .htaccess applied, all domains work flawlessly and when trying to navigate to the symfony domain I simply get a directory listing instead of having the page render, unless I include the app.php in the URL.
When applying the below htaccess, all non-symfony related domains show a 500 error and the one symfony related domain renders successfully, without the app.php in the URL. My goal at this point is to modify the htaccess so that all non-symfony related domains render successfully as they did before, while still maintaining the below .htacces to omit the app.php from the Symfony related project.
I appreciate any suggestions on how to resolve this issue. Thanks in advance!
.htaccess
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Explicitly disable rewriting for front controllers
RewriteRule ^app.php - [L]
RewriteCond %{REQUEST_FILENAME} !-f
# Change below before deploying to production
RewriteRule ^(.*)$ /app.php [QSA,L]
</IfModule>
Replace the line :
RewriteCond %{REQUEST_FILENAME} !-f
With :
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule .? - [L]