how to deploy React App with links in iis server - javascript

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]

Related

Laravel 8 and running on the server

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.

htaccess for React app using React router hosted on cpanel

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>

Problem when my React App is put on the web

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

.htaccess file won't work on my node.js app

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

In angular js after reloading page it say error on server 404 can not found the page after using $locationProvider.html5Mode(true);

I use
$locationProvider.html5Mode(true); to remove # from url
http://seagullinteractive.com/#/about :-its work after reload
to
http://seagullinteractive.com/about :- its not work dont now the problem
You need to create .htaccess file in your root directory.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
Need to put above rewrite rules. Then it will be fine. When you call http://seagullinteractive.com/about then your server will look for directory with name "about" which actually will not exist and you will get 404 as a result. You need to redirect to index.html(or whichever is your page that contains ng-app) if there is no resource found on server with requested URI.

Categories