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.
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
I use digital ocean space and CDN to host a React SPA. When hitting with a browser the url [host]/index.html it works fine. However hitting [host]/index.html/customers/one or any other subpaths, returns a 404. Currently, any reload on any subpath returns that 404. Last, I use terraform to update the SPA artifacts on DO spaces and I have tried to add a website_redirect="/index.html" to all the bucket objects (js, html and css) but with no success (more info if necessary here). And to be completely honest I am not sure I understand that option in the terraform digitalocean provider. I might be using it completely wrong.
Now, I have seen that question in multiple places but never with a clear answer.
Here is one on digitalocean community (https://www.digitalocean.com/community/questions/is-it-possible-to-send-a-301-redirect-for-bucket-objects) where no answer is provided but the issue seems to be similar.
There is a similar question on SO without an approved answer Redirect wrong URL/path DigitalOcean Spaces
This is a DO idea that is somewhat related https://ideas.digitalocean.com/ideas/DO-I-318
Is there a way to achieve the mentioned goal of loading index.html for every route with DO space + CDN and let the app parse the rest of the path to display the right component subtree of the react app?
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 have a Gatsby application with below structure:
src
|-pages
|- dashboard.js
|- projects.js
Once deployed on Netlify, these pages (obviously) are accessible via below URLs:
https://domain.netlify.app/dashboard and
https://domain.netlify.app/projects
Now our requirement is to access these pages via subdomain after configuring custom domain on Netlify.
So our the URL for our dashboard page would be
https://dashboard.customdomain.com
and URL of projects page would be
https://projects.customdomain.com
Now the questions are :
(1) Whether such implementation is possible with Gatsby
(2) If yes then what and where do I have to make changes to check the subdomain and accordingly serve the request.
No, it's not easily possible. This would mean you have completely different URLs for these pages in development (e.g. the relative path /dashboard) and in production (https://dashboard....). It will also necessarily mean that your JavaScript code is duplicated between the two domains and therefore loaded twice, which seems wasteful.
If you need the pages to be on two different domains I'd suggest you develop two different projects for them.
I have a backend using express to serve a static directory, to the path /, in which is contained a single page frontend. This backend also serves an API REST.
The frontend is built in React, and uses react-router to route the user from the different views of the web application.
If my react-router have two entries, let say /app and /config,
how can I redirect the client to that view of the application, if the user enters directly the URL in the web browser's address bar?
Right now, if I do that, Express gets the request and obviously returns a 404 message, as the single page is served to / path.
A simple way to resolve that is to always (even on 404s) send to user the index.html in your express route handlers.
See: https://stackoverflow.com/a/25499007/2624575
However, you need to take care of some things:
1) Your React Router code should start to handle 404s: https://stackoverflow.com/a/37491381/2624575
2) You need to handle correctly the path to your assets (icons, css, js, etc), otherwise you'll send the same index.html to those kind of resources (which will make your page render incorrectly)
3) Make sure that react-router is using browserHistory (the history that doesn't use hashes #), This way React will be able to render your routes correctly
Hope it helps!