So I have a react single page application that I am hosting on cpanel. I have a pretty common issue from what I have been researching but none of the post in SO have helped me so far.
I am using React Router which I know is purely client-side routing. The problem is when the user refreshes the page on a url such as https://example.com/privacypolicy I get the stand Not Found error 404.
My folder structure in cpanel is as follows:
home/mysite
public_html
all the folder from build folder (after npm run build locally)
index.html(important for the post)
.htaccess(important for the post)
The htaccess file is as follows:
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
I was hoping this was going to redirect all the requests to index.html and therefore react would know which component to render once that has been redirected.
It isn't and I'm a bit lost on what I'm doing wrong.
Any help is appreciated :)
To host ReactJS website on cPanel it is important to use homepage attribute in your package.json. For example, you can use:
"homepage": "http://example.tld"
Once you are done with setting up the homepage attribute, then run the npm build command to compile your code.
npm run build
This command will generate a folder named build in your project's root folder. Then upload the build folder contents to cPanel and use the below .htaccess file configuration.
<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>
Related
I have React App with multiple links in it.
When i deploy in server first it is working fine , when i refresh the page it is throwing : "404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable. " error.
I have added .htaccess file and tried still same
.htaccess file:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html
this solved same problem on my apache server: .htaccess
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yourwebsite.com/$1 [R,L]
I created two apps with vue framework, and i want to combine them together in one directory to be like this:
https://host.com/ => runs first vue app EX: Website Store.
https://host.com/admin => runs second vue app EX: Dashboard of the website.
can i find any way to do this ??
i tried to put dashboard build in ./admin/index.html and wbsite in ./index.html
but when i run it website works well but the admin path giving me Error 404 he can't find some chuncks
you should change your .htaccess file in your subdirectory so be able to run vue app on it. I don't think vuejs version matter !
if your subdirectory is admin you should use this config (in yourdomain.com/admin/.htaccess file) :
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . admin/index.html [L]
</ifModule>
I have a problem with running Laravel 8 on the production server.
In the root directory I put the .httpacces file from the public directory and changed the name of the server.php file to index.php
Everything works except styles, js, and more
The contents of the .httpacces file
Options -MultiViews -Indexes
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Send Requests To Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
What do I have to change, add? Thank you very much for the hint.
You do not want to rename the server.php. Whether you are using Apache or nginx, make sure your Documents Root points to the public!! folder of your Laravel application. Never point it to the main directory. You can find configurations for nginx and apache online regarding laravel.
I have created my React App, npm run build ... Put my file in filezilla,
but the problem is that I have this error
Not Found
The requested URL /main was not found on this server.
when I go to a page other than https://clickswinner.alwaysdata.net
What are you propose ?
Try creating a .htaccess file and put it at root of your server
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
</IfModule>
Google is your friend
Here is an article about how to fix 404 issues for Filezilla
https://medium.com/#christine_tran/deploying-a-simple-react-application-using-ftp-filezilla-dreamhost-1e5ff6b8abd6
I have the following .htaccess file located in the root directory of my node.js app:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+)$ $1.html [L,QSA]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*\.html\ HTTP/
RewriteRule ^(.*)\.html$ /$1 [R=301,L]
My website runs at www.mywebsite.com. When a form is submitted, the page is redirected to a success page:
res.redirect("/success.html");
The problem is, my .htaccess file isn't working properly. I am redirected to www.mywebsite.com/success.html, instead of www.mywebsite.com/success.
I have tried changing my node.js script to:
res.redirect("/success");
But then I get an error page. What am I doing wrong?
.htaccess is only for Apache servers, but you can try something like this:
nodejs equivalent of this .htaccess