I have a build a React website and hosted in Hosting er. When i go to website and open another page and refresh, it's showing "Oops, looks like the page is lost." How i will resolve this bug? Is this problem with routing in React?
I need fully functional website like when i run in my system. But when hosted the pages are not working properly.
The reason the website shows 404 is because in react all routes go to the index.html to render the components. But in a standard hosting it will look for a HTML file in the route's directory which doesn't exist in a React Application. Hence we configure our hosting service to redirect all request to the root index.html.
In your case since you have hosted on Hostinger you may use the follwoing guidelines to make updates to your .htaccess.
Official Guidelines from Hostinger:
https://www.hostinger.in/tutorials/what-is-react#How_to_Deploy_a_React_Application_on_Hostinger
Related
I have this website were we can create new questions. Whenever a new question is created a new url is generated I want google to crawl my website everytime a new question is added and display it in google.
I have my front end in react js and backend in express js.
My front end is hosted in firebase and backend in heroku.
Since I am using javascript and my urls are all dynamicly generated google does not crawl or index them.
Currently I am writing all dymaicly created urls into a file in my root folder in backend called sitemap.txt.
What should i do to achive this?
my sitmap link
https://ask-over.herokuapp.com/sitemap.txt
my react apps link
https://wixten.com
my express.js link
https://ask-over.herokuapp.com
i want to add
https://ask-over.herokuapp.com/sitemap.txt to google search console
In fact create-react-app is the wrong tool when SEO matters. Because:
there is only one HTML file
there is no content inside the single HTML file
heavy first load
etc, [search about reasons of using nextjs a good article
SPAs are the best for PWAs, admin panels, and stuffs like this.
But take a look at https://nextjs.org/docs/migrating/from-create-react-app. And my suggestion is to make some plans to fully migrate to Next.js.
Also, search about react SEO best practies and use the helpers and utilities like React Helmet.
create-react-app is not the way to go if you are going for a seo friendly website.
if it's behind a login screen you can go with create-react-app.
if the site is a blog or documentation site , I would suggest you migrate to nextjs or gatsby js or if it's a very small webpage go with raw html, css , js
It's not possible for Google or any other web crawler to crawl your SPA Websites. The best way to fix this is either to use Server Side Frameworks like Next.js or use pre-rendering and redirect crawlers to pre rendering server instead of main website.
You can checkout prerender.io, it has the open source version as well, you can run it on a seperate server and use one of the snippets/plugins for your web server (apache/nginx/others) to redirect requests to different upstream server.
I've been using it for one of my projects (e-commerce store) built on VueJs and it works like a charm.
To understand the basics, what it does is it'll load your website in a browser, and cache the rendered code in it's database/cache, and when any crawler visits your website they'll be redirected to cache which is the generated html page of your website, and crawlers will be able to read everything smoothly.
I just deployed my create-react-app via github pages. The site (jasonclerk.com) loads fine when clicking through to the root domain or entering the root domain in URL address bar of browser. However if deep-linking to a directory level page (jasonclerk.com/about) or entering that directory level page in URL address bar, I'm hitting 404 error. If I use the navigation within the site, I can go to the other pages without any issue.
I did use routes (react-router-dom) in my top level component, all have been working fine in local test environment. Also, previously deployed the site via heroku and didn't have any issue with deeplinks. Deployed on ghpages now so I could add custom domain.
Any advice to fix the issue on loading directory level pages directly?
react-router is a good example of client-side routing. You are facing this issue because the GitHub Page server has no idea you are building a client-side routing application. From the server's point of view, it does not recognize /about. There are 2 ways to solve your issue.
Use HashRouter instead of BrowserRouter, the URL will end up not as pretty but since it uses hashes, you don't have to do anything special on the server-side.
Follow this guide here to implement a "hacky" solution for Github Pages. Basically, you add a script in the 404.html (i.e. the page GitHub will display when it receives 404 error), which will redirect all request to your index.html.
I used create-react-app to create my react app.
I have it deployed on AWS Cloudfront + S3. Everything seems to work when I visit the site: https://www.remotecareers.io
However, when I try using the "Fetch and Render" feature of Fetch as Google, I see this:
It's weird that the This is how a visitor to your website would have seen the page: part is empty. However, my main issue is when I try to do the same thing for the non-root routes.
For example, I have this page: https://www.remotecareers.io/remote-jobs/new. It looks like it's working fine. However, when I try fetching it through google it says it's Not Found.
It says the same thing in the new Google Search Console too:
So far even to get just the This is how Googlebot saw the page: part to work, I installed and added:
import "babel-polyfill"; // I tried this by itself as well as with the 2 below
import "url-search-params-polyfill";
import "whatwg-fetch";
What's weird is that the homepage is (partially) working but the rest of the pages aren't being scanned at all. I thought it might be because I wa missing the robots.txt file so I added it but it seems to not have any affect (https://www.remotecareers.io/robots.txt). Can someone help me?
From my experience, relying on googlebots to run javascript to render the app is not very reliable. For best SEO performance, you need to server render your react app.
You will need a dedicated NodeJS server that will render your react app, then send down the rendered HTML to the browser. The browser will receive the HTML response, which includes some script tags as well. After the scripts are loaded, it will run and hydrate your react app so that everything works properly.
Try reading this article to get you started on this topic.
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.
I want to serve same index.html page for all (sub)urls in my app on gh-pages
is that possible?
right now when I go to repo/inner/path I get a 404
so I want to "force" github pages serve the same root index.html on all routes
This may or may not be in the cards for you, but it seems you're setting up routing for a SPA. Many client based routers offer hash-based routing precisely for this reason so that you don't have to configure your hosting provider to redirect urls to return index.
The landscape of solutions seems to be:
Use Hash-Based Routing
USE: https://example.com/index.html#inner/path
NOT: https://example.com/inner/path
React Router - <HashRouter>
Angular - HashLocationStrategy
Vue Router - {mode: 'hash'}
Use the custom 404 page for gh-pages to redirect all missed traffic back to index.html
Choose a different free static hosting provider that allows basic url rewrites or redirects like:
netlify
surge.sh
It doesn't look like github supports this feature right now, so you'll either need to avoid deep link requests to the server or change to a hosting provider that allows you to do so.
Further Reading:
Can I create routes with react-router for a github-pages site?
Add single page application support for Github pages
S(GH)PA: The Single-Page App Hack For GitHub Pages
Check out Single Page Apps for GitHub Pages. It uses a custom 404.html file with a redirect script to always serve index.html, while preserving the path that was originally requested.
If you can list all possible urls for your application, you can use jekyll redirect from on github-pages.
Sadly, it will be difficult to list all urls that contain a specific id or name like /path/customer/id where id can be any integer.
You will have to find another hosting like netlify or cloudcanon which allows you to configure real redirections.