React App on Github Pages is Blank and Returns Error 404 #22392

toyosicodes · 2021-11-29T19:10:15Z

toyosicodes
Nov 29, 2021

Hi everyone,

I deployed a react app to Github Pages and apparently it was successful, but the site shows only a blank white page. The console says ‘Failed to load resource: the server responded with a status of 404 ()’. Here is my repo: GitHub - toyosicodes/memory-game. The link to the site itself is GitHub - toyosicodes/memory-game.

I’d appreciate any help. I can’t figure out what I’m doing wrong. I’ve spent hours reading topics about this issue and applied the recommended solutions, but they haven’t worked in my case.

Answered by Katsute

Nov 29, 2021

GitHub pages only supports static sites, it does not run npm start

View full answer

Katsute · 2021-11-29T19:41:33Z

Katsute
Nov 29, 2021

GitHub pages only supports static sites, it does not run npm start

0 replies

toyosicodes · 2021-11-29T21:28:31Z

toyosicodes
Nov 29, 2021
Author

I’m sorry, I don’t understand this

0 replies

Katsute · 2021-11-29T21:45:21Z

Katsute
Nov 29, 2021

GitHub pages only serves files that are committed to the repository, any files that are not committed (ex: node_modules, dist) will not be available on the site and will cause a 404 not found.

0 replies

toyosicodes · 2021-11-29T22:02:42Z

toyosicodes
Nov 29, 2021
Author

Thanks for the explanation. So how can I fix the problem? Because there has to be a way to commit node_modules, right?

0 replies

Katsute · 2021-11-29T22:33:45Z

Katsute
Nov 29, 2021

Upon closer inspection it seems that the issue is caused by the links to your sources. The node_modules isn’t the problem.

Take this link for example:

/toyosicodes/memory-game.github.io/favicon.ico

When you deploy the site to GitHub pages it serves it at https://toyosicodes.github.io/memory-game/, the index.html file is expecting to find the favicon at:

https://toyosicodes.github.io/toyosicodes/memory-game.github.io/favicon.ico

The correct link would be:

favicon.ico or /memory-game/favicon.ico

Any of these changes would correct the url to:

https://toyosicodes.github.io/memory-game/favicon.ico
https://toyosicodes.github.io/memory-game/favicon.ico

0 replies

toyosicodes · 2021-11-30T05:12:51Z

toyosicodes
Nov 30, 2021
Author

I really appreciate you helping me. I have to confess, though, that I have no idea how to make the changes you’re suggesting. If you could guide me on that I’d be really grateful. I forgot to add that I’m a beginner when I originally wrote the topic 😅

0 replies

Katsute · 2021-11-30T15:41:14Z

Katsute
Nov 30, 2021

The %PUBLIC_URL% inside the href/src is incorrect, take this line for example:

  <a href="/https://github.com/toyosicodes/memory-game/blob/c8b97d93ee3da3507de487be88ad980290a2fac1/public/index.html#L5" target="_blank" rel="noopener nofollow ugc">github.com</a>

toyosicodes/memory-game/blob/c8b97d93ee3da3507de487be88ad980290a2fac1/public/index.html#L5

    
      
          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="utf-8" />
              <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              <meta name="theme-color" content="#000000" />
              <meta
                name="description"
                content="Web site created using create-react-app"
              />
              <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
              <!--
                manifest.json provides metadata used when your web app is installed on a
                user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

After building, the link changes to /toyosicodes/memory-game.github.io/favicon.ico where the site then expects to find a file at https://toyosicodes.github.io/toyosicodes/memory-game.github.io/favicon.ico, which is results in a 404 because their is no file at the link.

The %PUBLIC_URL% should instead be /memory-game, where upon building it would change to /memory-game/favicon.ico then the site would expect to find that icon at https://toyosicodes.github.io/memory-game/favicon.ico

0 replies

Hariprakash-va · 2023-06-24T17:54:44Z

Hariprakash-va
Jun 24, 2023

Hi,

Im also facing same error my output pages blank
This is my repo: https://github.com/Hariprakash-va/Todolist/tree/gh-pages
Could you pls help me?

0 replies

vramdal · 2023-08-14T08:16:40Z

vramdal
Aug 14, 2023

For anyone landing here with this problem in their Create React App:

You need to add the homepage property to your package.json. The value should be the URL of your site, e.g. https://yourname.github.io/your-repo

If you don't do this, the references to your static files (bundle.js, *.css, etc) will be wrong.

Documentation: https://create-react-app.dev/docs/deployment/#step-1-add-homepage-to-packagejson

1 reply

me-ibad Apr 8, 2024

Hello I follow all these steps with home page as well can you please check my repo and see if any other problems I am try to fix this issue for the last 2 days
https://github.com/me-ibad/bookingCalender

NikhilSethuram · 2023-11-22T22:35:27Z

NikhilSethuram
Nov 22, 2023

Hi im facing the same issue. This is my repo
https://github.com/NikhilSethuram/nstPortfolio

1 reply

me-ibad Apr 8, 2024

How did you fix? iam still facing this issue here is may simple react app
https://github.com/me-ibad/bookingCalender

jdevfullstack · 2024-04-09T05:17:52Z

jdevfullstack
Apr 9, 2024

for those who are wondering, you can use React to create a static site only but you need to deploy it first and make sure the build output is in the correct place, then GitHub Pages will start hosting it

actually if you know much of advanced, you can deploy a full stack application but the backend service will be in a different hosting site, this is also true if you only want to develop a UI for, say, a GitHub App using its own API, the frontend will be done in React and be hosted in Pages

these are the steps from Copilot,

4 replies

me-ibad Apr 9, 2024

Hi I am using same step but got 404 assets error here is my repo
https://github.com/me-ibad/bookingCalender

jdevfullstack Apr 9, 2024

you've missed the actual repo name bookingCalendar to be part of the URL, as you are not in the root, so the correct URL is

https://me-ibad.github.io/bookingCalendar/src/main.tsx

as for vite.svg, there is no such file in the root in the main branch, it's in gh-pages and it's not the one being hosted for sure because I tried the main.tsx, and I can find it on the page, so it means it's hosting in the default branch, attempting to access it through default branch is a sure 404

aidanmonty99 Sep 11, 2024

Hi,

I also followed the above steps, but when I go to my web page I get a blank screen and a 404 error on the following files:

My repo is here: https://github.com/aidanmonty99/aidanmontydotcom

Thanks

aidanmonty99 Sep 11, 2024

Nevermind, I got it to work by removing the repo name from the end of my homepage URL, leaving it as "https://aidanmonty99.github.io/". I assume this is because the app is already hosted in the root of the repo, but I'm not completely sure.

Gabrielttbr · 2024-09-19T19:27:06Z

Gabrielttbr
Sep 19, 2024

Good afternoon, everyone.

To deploy a React application with multiple routes on GitHub Pages, you first need to configure your routes by adding the baseRoute to them.

Example:

<ContextShoppingCart.Provider value={{
    shoppingCart,
    setShoppingCart
  }}>
  <BrowserRouter basename="your-repository-github">
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/shopping-cart" element={<ShoppingCart />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>
</ContextShoppingCart.Provider>

Next, you need to add a configuration in your vite.config.js:

JavaScript


export default {
  base: '/your-repository-github/',
  plugins: [react()]
}

Then, you need to follow the installation steps from https://github.com/gitname/react-gh-pages.

Goodbye!

1 reply

FDiskas Nov 10, 2024

In index.html you can actually write

<base href="%BASE_URL%" />

it will be automatically replaced with the value in vite.config.js base key

federicoisa · 2025-01-25T22:23:25Z

federicoisa
Jan 25, 2025

buenas, como estan?, intente ya muchas veces y tambien guiandome con videos, con chatgpt y hasta de un curso y no pude, cuando despliego en github pages mi app, en el localhost funciona excelente, le hice cambios a las rutas de imagenes, actualice el docs varias veces luego de cada cambio, las rutas de las paginas tambien las actualice, el tema es que creo que lo estoy haciendo mal porque por mas que cambie las rutas, parece que para github pages ignora y se comporta mal y yo no estoy encontrando la manera de hacer que las rutas sean correctas, les dejo mi repositorio para que lo vean y el link de mi portfolio, les agradeceria su ayuda, lo necesito y de paso me gustaria aprender que error estoy cometiendo.
https://federicoisa.github.io/Portfolio-FedericoIsa/
git@github.com:federicoisa/Portfolio-FedericoIsa.git

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

React App on Github Pages is Blank and Returns Error 404 #22392

{{title}}

Replies: 13 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

React App on Github Pages is Blank and Returns Error 404 #22392

Replies: 13 comments · 7 replies

toyosicodes Nov 29, 2021 Author

toyosicodes Nov 29, 2021 Author

toyosicodes Nov 30, 2021 Author

Replies: 13 comments 7 replies

toyosicodes
Nov 29, 2021
Author

toyosicodes
Nov 29, 2021
Author

toyosicodes
Nov 30, 2021
Author