I have create a bundle of react project by npm run build and create a virtual host file which is pointing to build folder, the application is working fine with different route, but when I page refresh other then root route then page not working.
This image is without page Load:
https://i.stack.imgur.com/EnBOU.png
But after page load it giving me this error.
https://i.stack.imgur.com/GooRM.png
Hi Please make base href on build index.html file inside head tag like this.
<base href="/reactapp/" /> // your root folder path
and add a .htaccess file in the root, paste below code inside the .htaccess.
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
I hope it's useful for you.
Thanks
Related
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
I am building angularjs project with PHP, MySQL, apache2 on Ubuntu system
Project structure
var/www/html/demo/
Demo folder is my project folder,
demo=>js(All js file), index.php, addstudent.php file etc
I am facing problem while refreshing the whole page and also using routing concept in AngularJS with html5Mode(true) but it doesn't working properly with .htaccess file.
The requested URL /demo/addstudent was not found on this server.
htacces code here
DirectoryIndex demo/index.php
RewriteEngine On
RewriteBase /demo/
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.php [L]
In index.php added base ref is
Overview :
I have an AngularJS application that uses $locationProvider.html5Mode(true) and it is served from an Apache server. Until now I used the source code to be accessed from the others and I just needed a redirect to index.html for the angularJS's HTML5 mode. So I had this for the .htaccess file for my /app folder.
.htaccess :
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
Modifications :
I then added Grunt for minifying the whole solution that is generated in the /dist folder of the app(so now the minified solution is found at /app/dist). I would now like to route the whole traffic of my app to the minified version, without making the users change the link. So, in practice I would like to redirect every call from /app to /app/dist.
Directory Structure now :
app
dist
minified versions(css,html,js)
I tried using some conditions from here in /app's .htaccess and moved the other .htaccess file in /app/dist, but with no success. I don't even know if the two can be combined in this way. I know I can use the dist folder as /app instead, but I wouldn't really want this, as /app is a repo and it is way easier to keep it updated. So how can I manage to achieve this with redirecting?
Also, as a second thing, is it possible to put a flag somehow so I let alpha users use the normal (not-minified) version for better debugging?
Update:
I added a sample project for this here. I just kept the initial .htaccess files that i showed above and you can check that both versions(/test and /test/dist) work as stated above. Also, it probably has some unused code and dependencies, but I just cut the other parts from my project(don't judge :D).
For this I used the initial configuration with AngularJS 1.4.8 that could generate some errors like the one stated here and here. Feel free to update the AngularJS version to 1.5.8(the last stable release of Angular 1), but take in consideration the comments on Cosmin Ababei's post as well. Also, the project uses npm for installing grunt(and other extensions for grunt), bower for angular and some other basic components and grunt for building the minified version(actually, it's just concatenating resources in same files for now). If you need to change the dependencies, please don't forget to run bower install. If you want to regenerate the dist folder, don't forget to run npm install and grunt build.
I'll assume that inside the /dist directory you have index.html with the updated URLs which point to the minified resources and the correct <base> tag. Note that the <base> tag must point to the /dist folder - just append /dist to the value you're using for the uncompressed index.html and you'd be fine.
With those things in order, here's the updated .htaccess file:
RewriteEngine On
# Don't rewrite files
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^ - [L]
# If the ALPHA_USER cookie is set, serve the uncompressed files
RewriteCond %{HTTP_COOKIE} ALPHA_USER [NC]
RewriteRule ^ index.html [L]
# Rewrite everything
RewriteRule ^ dist/index.html [L]
You'll notice two things:
I've removed RewriteCond %{REQUEST_FILENAME} -d as most likely you don't need to serve whole directories
I've added the ALPHA_USER cookie which would redirect the users to the uncompressed files. This cookie can have any value you desire.
Inside public_html => /app => .htaccess try this :
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ dist/index.html [L]
Note : HTML <base> tag should be point to the dist folder. I hope this solution will work as per your expectations.
I have a project with angularjs for front end and slim for backend api. Therefore I want to map any api/(...) to server/index.php, and map anything else to index.html. However I can't get them work together with .htaccess. api/(...) will direct to index.html instead of index.php.
This is the htaccess I'm using:
RewriteEngine on
RewriteBase /
RewriteRule ^api/ server/index.php [L]
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} !\.private/
RewriteRule \.(jpg|png|js|css|html)$ - [L]
RewriteRule ^.* index.html [L]
This is the file structure I have now (with some files omitted):
root/
index.html
server/
index.php
.htaccess
I tried to add some random characters in .htaccess file, and got a 500 error, so the .htaccess file works. I also tried to remove the last line for index.html rule, and the api works after commenting out.
Please help me with this problem, thanks!
I finally figured out why from the best answer in this link -> view
The problem is that [L] command will not terminate the rewriting process totally, it will match from the beginning again. So in the first iteration, api/ will be changed to server/index.php. Then in the next iteration, server/index.php will be matched to index.html.
Apache will terminate rewriting process when the pattern and substitute are the same. So the way to work around it is to add termination rules. I update my htaccess, and now it works.
RewriteEngine on
# Final rule for assets
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} !\.private/
RewriteRule \.(php|jpg|png|js|css|html)$ - [L]
# Final rule for back end index
RewriteRule ^server/index\.php$ - [L]
# Redirect to back end index
RewriteRule ^api$ server/index.php [L]
RewriteRule ^api/.* server/index.php [L]
# Final rule for front end index
RewriteRule ^index\.html$ - [L]
# Redirect to front end index
RewriteRule ^.* index.html [L]
I know that the question got answered but it might help those people who want to host their React (front end) and Laravel (backend) on cpanel of GoDady.
Assuming that you people know the basics of cpanel, first go to the public_html and to your folder where your domain or subdomain is located.
you need to upload the application to the public html but remember when you are building react static files (npm run build) you need to define the domain name or the sub folder name with the key homepage in you package.json
or if you want to add the static files in sub folder then it is must to do
"homepage": "http://ghulam.covidbaml.com/yourSubFolderNameHere",
so, I am assuming my folders structure on the cpanel (public_html)
public_html/Static React build Files
public_html/ server (the server folder is also located in same place which contained laravel files)
Now we can write .htaccess which is really imported assuming godady linux hosting.
htaccessFile below:
Options -MultiViews
RewriteEngine on
# Rule to start the laravel api on work
RewriteRule ^server/public/index\.php$ - [L]
# Redirect to index.php
RewriteRule ^api$ server/public/index.php [L]
RewriteRule ^api/.* server/public/index.php [L]
# now I am redirecting the React index file (index.html)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
note:
RewriteRule ^ index.html [QSA,L]
The above command is for the purpose of react routing that it doesn't give 404 error while you refresh the page.
When I access my page from the index and start browsing everything works fine, but when I am on a route other than / for example in /details/123 and I refresh the page(I have URL rewriting configured) the route is not properly set.
It means, when I check the location path when browsing normally from the index and I am on /details/123 the location path is /details/123 as expected but when I refresh the page and I am still on /details/123 the location path changes to /123 causing ngView to display the wrong view.
I am using html5 mode and Angular v.1.1.5
UPDATE: I created a simple example here to illustrate the problem.
I don't have any special setup, I don't think is a server issue. I have the same problem with a different app in python where the redirection is done inside the application.
The .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.php
</IfModule>
This may be related to a nasty issue that showed up during Angular 1.1.5 and is a bug in the core library. A solution that has worked for many is to add the following tag to your index.html head.
If your application is running at the root of your domain.
<head>
...
<base href="/"></base>
...
</head>
Or if your application is running in a subdirectory, specify that subdirectory (e.g. 'myapp'):
<head>
...
<base href="/myapp/"></base>
...
</head>
Additionally, you may also try a new set of rewrite rules. This configuration has worked for many ui-router users.
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>