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.
Related
I'm working for a company and just deployed a project for them, but I encountered an issue. so, when you go to the link http://domain, you can go to the page, and from there you can go to any other page (react route), but if you go directly to http://domain/some-end-point, it shows 404 not found. does anyone know how to fix it?
That happened because your server side doesn't handle redirect to index.html, You can fix it by config your back end to always redirect to html, or simply you can fix it from react-router using HashRouter instead of BrowserRouter
here is a full explanation about Server side vs client side routing
Add the following code to the public folder file name should be
_redirects
/* /index.html 200
refer image
You can fix this with .htaccess in the root folder :
<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>
I'm new to web-hosting and cPanel, so please be nice to me...
I have built a website using react and managed to upload its build file to cPanel. It seems to work fine, however, whenever I try to switch between pages, I get a 404 error, although the pages clearly exist (for example, when I press a button to switch to mydomainname.com/about-us). The switching works perfectly locally using react-router..
I would really appreciate it if someone could help me solve this problem!
Thanks in advance!
This is because ReactJS uses client side routing.
To fix 404, create a .htaccess file and paste below contents and upload it to your site root. It should work.
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
If the above did not work, try below (recommended by ReactJS team), either one of this should work
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
The switching works perfectly locally using react-router
Routing works fine with the inbuilt ReactJS web server but not with Apache web server. Also make sure you are using react router Link component to navigate between pages and not the html anchor (a) tag.
You have to redirect all the requests to your index.html. You can edit the .htaccess for that. use <Link> from react-router to make redirections.
Follow these steps and you will be fine
Specify your homepage in your package.json file like this
{
"name": "yourappname",
"homepage": "http://example.com",//add your domain here line
"private": true,
"version": "0.0.0",
}
2.Build your app by running yarn build or npm run build
3.Then copy the contents of your build folder and paste them on public_html folder in your cpanel
3.Go to your Cpanel file manager public_html folder and edit .htaccess file or create new one if it does not exist. and paste this there
<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>
Note the .htaccess for this should be at the same level with the contents of the build folder.
Save and your are done
Hope you can help with this issue:
I am trying to host my website online, the problem is that the whole web(spa) is made in React, I only have a contact form in laravel, however, when i load my backend using laravel into the hosting folders instead of the react website I see the default laravel web, I changed my .htaccess to the following:
<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>
but still not showing the web, only the default laravel welcome page.
on my public_html folder I have the content of my laravel backend public folder, and the build files of the react, on the root folder the rest of the backend-laravel project,
attached screenshot of the files
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.
I've got an AngularJS app running on top of CakePHP 2.6. I'd like to enable html5mode in Angular so I don't have to include a # in URLs, but doing so requires configuring some .htaccess files so that all requests hit index.html.
Not all of my web app is Angular yet, so I can't just redirect everything to index.html- instead, I'd like to set things up so that all requests to a certain subdirectory (and its subdirectories) redirect to that subdirectory's index.html.
CakePHP has a folder structure like this:
/ // Server web root directory: index.php, etc
----/app // The directory containing the actual Cake app
----/webroot // Web assets used by the Cake app
----/myapp // Where I'd like to store the index.html for my Angular app
I'd like to get this set up so that any requests to /myapp or its subdirectories get automatically redirected to /app/webroot/index.html. Does anyone have any ideas about how to go about this?
My current .htaccess files:
/:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^$ app/webroot/ [L]
RewriteRule (.*) app/webroot/$1 [L]
</IfModule>
/app:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
/app/webroot:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/(app/webroot/)?(img|css|js|eot)/(.*)$
RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
I would just create a controller in CakePHP to handle all requests for myapp and render the static HTML as a view with a custom layout (if required).
Performance will not be an issue because the route for CakePHP will only be executed once. After that the AngularJS app is running and will take over all HTML5 routing locally in the browser.
While you can achieve what you want in .htaccess it limits you to running the CakePHP application on Apache. If you want to scale later to IIS or Nginx you'll have to recreate these rewrite rules.