Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: 404 Page Not Found on refreshing a page on gh-pages #48

Open
Rahulm2310 opened this issue Mar 21, 2021 · 16 comments
Open

Bug: 404 Page Not Found on refreshing a page on gh-pages #48

Rahulm2310 opened this issue Mar 21, 2021 · 16 comments
Assignees
@Aryamanz29
Labels
Category: Outreach/Research Changes or improvements related to external research of the app. Type: Bug Bug or Bug fixes.

Comments

@Rahulm2310
Copy link
Contributor

Rahulm2310 commented Mar 21, 2021 •
edited
Loading

Describe the bug

We get a 404 Page Not Found error when refreshing a page. Actually, this happens because github pages doesn't supports single page apps. It doesn't have access to front-end routes.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://anitab-org.github.io/stem-diverse-tv-cms/login
  2. Refresh the page
  3. See error

Expected behavior

We should not get a 404 error and should be redirected to the same page.
A solution I saw was to add a 404.html file to add under the public folder which redirects back to index.html. Although not sure if it will work for us or not.

Feel free to research on this find the best possible solution.

Screenshots

stem-404

Desktop (please complete the following information):

  • OS: Any
  • Browser: Any
  • Version: Any

Additional context

For reference, you can see the implementation here.
@chinmaym07
Copy link
Member

This happens to /register also .. Please include that too ..!! @Rahulm2310

@Rahulm2310
Copy link
Contributor Author

@chinmaym07 It is a generic issue and happens with all routes.

@Rahulm2310 Rahulm2310 added Category: Outreach/Research Changes or improvements related to external research of the app. Status: Available Issue was approved and available to claim or abandoned for over 3 days. Type: Bug Bug or Bug fixes. labels Mar 24, 2021
@Aryamanz29
Copy link
Contributor

I want to give it a try, Could you assign this to me? @Rahulm2310

@Rahulm2310
Copy link
Contributor Author

Yours @Aryamanz29 . Happy Researching 🎉

@Rahulm2310 Rahulm2310 removed the Status: Available Issue was approved and available to claim or abandoned for over 3 days. label Apr 19, 2021
@Aryamanz29
Copy link
Contributor

@Rahulm2310 Hii,👋
I have doubts about how to raise PR for this kind of issue? I need to submit a doc link or code🤔?

@Rahulm2310
Copy link
Contributor Author

Hi @Aryamanz29, you need to submit link to a google doc explaining the solution. So that others can give their feedback on it.

Aryamanz29 added a commit to Aryamanz29/stem-diverse-tv-cms that referenced this issue Apr 29, 2021
@Aryamanz29
Research task : 404 gh pages (anitab-org#48)
fd33e37
@Aryamanz29 Aryamanz29 mentioned this issue Apr 29, 2021
Closed
11 tasks
@Aryamanz29
Copy link
Contributor

@Rahulm2310 Done 👍 , Could you please review my PR 😄

@MonkeyNinjaGame
Copy link

Is there a solution for this? Thanks!

@AngelicaGE
Copy link

Is there a solution for this? I am facing same issue with repo that has a react project.
Thanks!

@Moussashi
Copy link

No solutions yet for this problem. unfortunately

@catherineisonline
Copy link

Joining the thread to find out whether someone found any solution to this. I have been researching this for almost a month and had no luck so far, unfortunately!

@willianbraga
Copy link

Hello, I found a workaround to solve this, I was facing the same problem on my angular app I hope it works as well for you.
So first you will need to add a new page named 404.html to you repo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GitHub Pages Issue</title>
    <script type="text/javascript">  
 
      var pathSegmentsToKeep = 0;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );
    </script>
  </head>
  <body>
  </body>
</html>

If you are not using custom domain on Github Pages set pathSegmentsToKeep = 0, otherwise set pathSegmentsToKeep = 1.

Copy this script and add to you index.html.

    <script type="text/javascript">
      (function(l) {
        if (l.search[1] === '/' ) {
          var decoded = l.search.slice(1).split('&').map(function(s) { 
            return s.replace(/~and~/g, '&')
          }).join('?');
          window.history.replaceState(null, null,
              l.pathname.slice(0, -1) + decoded + l.hash
          );
        }
      }(window.location))
    </script>

On you build folder need to have this file 404.html, and thats is it.

jagankumar-egov added a commit to egovernments/ui-docs that referenced this issue Nov 22, 2022
@jagankumar-egov
UM-5171 :: Created a 404 html file incase if user tries to navigate d…
8bc9faf 
…irectly using any routes

anitab-org/stem-diverse-tv-cms#48
@leenasalman leenasalman mentioned this issue Jan 24, 2023
Closed
Merged
@Katyi
Copy link

Katyi commented Feb 1, 2023

this video hepls me:
https://www.youtube.com/watch?v=fuGu-Ponjf8&ab_channel=ToThePointCode

@rleyven
Copy link

rleyven commented Feb 23, 2023

Thank you for This

@Josebratt
Copy link

Hi there, if you use Angular
you can resolve using this => useHash: true

@NgModule({ imports: [RouterModule.forRoot(routes,{ useHash: true})], exports: [RouterModule], })

if you use react.
you can resolve using this => import { HashRouter } from 'react-router-dom';

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { HashRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <HashRouter> <App /> </HashRouter> );

I hope will be helpfull.

@hadarhubara10 hadarhubara10 mentioned this issue Jun 5, 2023
Merged
@rishav-bose0 rishav-bose0 mentioned this issue Nov 28, 2023
Merged
@emmaliwertz
Copy link

I'm deploying a VueJS app to gh-pages using vite.

To get around this issue:

  • Create a folder in your repo for each directory. For example, if your website has a /schedule route then you want a folder named schedule
  • In each folder, add an index.html. The contents of this should closely match your root index.html.
  • Update your vite.config.js file so that these new index files actually get built into the dist folder. Example below!

In this example, all directory pages need to be added to the build.rollupOptions.input config. You may have to add this as it's not one of the standard/default configurations.

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        lessons: './lessons/index.html',
        schedule: './schedule/index.html',
        404: './404.html'
        // ...
        // List all files you want in your build
      }
    }
  },
  plugins: [vue(), vueJsx()],
  ...
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Aryamanz29 Aryamanz29

Labels
Category: Outreach/Research Changes or improvements related to external research of the app. Type: Bug Bug or Bug fixes.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Research task : 404 gh pages Aryamanz29/stem-diverse-tv-cms