I have hosted a static NextJS website on amazon S3. The website works fine when the homepage is loaded and then other pages are loaded by nav. But if a particular page(except homepage) is reloaded, the site returns 404.
Also, I have tried putting the error page route back to 'index.html' as suggested on some threads but didn't solve the issue. Instead, after every page refresh, the index page opens.
How do I resolve that when a person is on Page1.html(for example) and he his refresh, Page1.html loads not the homepage.
The right way to go is to add an error fallback to index.html in the S3 bucket's static web hosting configuration.
The reason of this is when a URL is hit (either by manual input in the browser or a refresh), it sends a request to /list to the S3's root server (the one managed by AWS) before it hits our bucket. That S3 server have no idea if this is a reactjs app or not, so it goes into the bucket to look for the /list in the root of my bucket, which doesn't exist, so it returns the 404 error.
However by adding the error fallback, now when it gets 404, it redirects the request to index.html, where the react app is defined and loaded into. In this case, the /list will go through the normal flow to reach the right router that handles page rendering, problem solved.
Related
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
We created a react js application.
Problem: Not able to hit react URL from the postman to run component's function.
local URL: http://localhost:3000/rules/routine
Note: Above URL can be reached without login.
When we are calling a url from browser it's working however when we hit from a postman then it always returns public/index.html page but not the expected response.
So it is not calling the proper url http://localhost:3000/rules/routine.
Please find attached screenshots on below links
browser hit: https://prnt.sc/73gDWh4PiHgu
Postman hit: https://prnt.sc/fhVL78yaiATP
It's technically possible, and working it seems, but I suspect your expectations are a little skewed in what you think Postman will do or is capable of.
Keep in mind that all React apps are effectively a single page app, even when they use a routing/navigation package like react-router. react-router is only manipulating the URL in the address bar in the browser window, the app is still running from the single location on a server where it's hosted, i.e. public/index.html.
The servers hosting the app are configured to route all page requests, i.e. "http://localhost:3000/rules/routine" to the root index file, i.e. "http://localhost:3000/index.html" so the React app is loaded and can handle the "/rules/routine" internally.
So from what I see here, the response from Postman is absolutely correct and what I'd expect to see. It made a request to the development server for a nested directory "/rules/routing" and the server responded with the root index.html file. When the browser makes this request to the development server and gets a HTML file back it loads and renders it, and in this case, it's your React app.
Postman isn't a browser so it's not going to load the HTML response and do anything with it.
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'm utilizing prerender.io service to prerender my React app.
In the app I have a transitional page to send to the prerender.io parametrised metadata and then redirect to the app's main page.
The problem is that it seems that the service prerenders the destination page (the app's main page) with its metadata instead of transitional one.
Question: how to prerender transitional page with its metadata?
So with the javascript redirect happening immediately, the Prerender server is thinking the page is still loading so it does not check the meta tags until after the javascript redirect is complete.
The best solution here is to delay the javascript redirect for ~5 seconds for a Prerender browser but to allow the javascript redirect to happen immediately for a normal user.
I am working at a SPA using Flask(with jinja) and AngularJS. Everything works fine, but when the application is in a given state and I try to refresh the page in browser, the server responds with 404 response: "error": "Not found". Is there a way to make this work in a proper way when trying to access a page of the SPA application through the URL?
This may depend on how your dev http server is setup:
It should be set to always load the default page which is index.html such that the angular engine will load and run and only then it will serve the other routes (states) like localhost/state, otherwise the angular router would not be able to resolve the url since it is not loaded (letting the http server handle the request, serving a 404 Page Not Found)
The http servers sometimes serve only one level deep url's like localhost/state, not localhost/state/param and you need to change some settings to make it work, but I think this is beyond the scope of your question :)
You can use a hasher in SPA. You need to parse hash string before initializing view model and based upon the value of hash set your current visible page and then bind the view mode.
You need to have a rule to always return your SPA index.html page for any routes that match your angular routes. I'm not sure what your web server is, apache or nginx or whatever but you should be able to find instructions on how to match those requests back to index.html.
You must have enabled html5 mode to true in in your angular js app. Set that to false will solve your problem.