Getting blank page after react app publish in github

Question

My steps are:

npm run build

Then

"homepage": "https://parthaaaaa.github.io/firstwebapp/",

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

in package.json file

Then

npm install --save-dev gh-pages

Then

In Github repository.. I selected gh pages branch

Finally,

npm run deploy

but I'm getting a blank page app runs fine in local host..

Help..

Overvalue

GET parthaaaaa.github.io/firstwebapp/Parthaaaaa.github.io/… net::ERR_ABORTED 404 – Mosora

Can you write it in another few lines? please.. – Overvalue

Thats the error I get when i load that page. It cannot load the final bundle of your app – Mosora

Thanks.But I'm getting nothing but a blank white page.It works fine in localhost.What should I do ? my repo: github.com/Parthaaaaa/firstwebapp – Overvalue

Answer 1

In your package.json homepage is not correct, so it is messing up the build. Change

  "homepage": "https:Parthaaaaa.github.io/firstwebapp",

to

  "homepage": "https://parthaaaaa.github.io/firstwebapp",

Then try building and deploying again.

---

Documentation on Building for Relative Paths

Herbarium

It should work. I have forked your code and corrected homepage url in package.json and managed to deploy successfully. – Herbarium

I am still getting blank page :(.Did you run it in master branch or gh-pages ? – Overvalue

I just used your npm run deploy command, that's it. Your deployment seems stuck for some weird reason. Can you try deploying again? – Herbarium

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted and upvote :) – Herbarium

Answer 2

You need to add your root path to the basename prop of BrowserRouter

If you are not using BrowserRouter, add the following

import BrowserRouter from 'react-router-dom/BrowserRouter'

ReactDOM.render((
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
), ...)  

process.env.PUBLIC_URL is is a part of the node.js library and is a dynamically generated url that changes based on what development mode you are in, whether you are working on your app locally, or on an actual production server like GitHub pages (https://parthaaaaa.github.io/firstwebapp/).

Also update the route to your home/firstwebapp component(if any)

 <Route exact path='/firstwebapp' render= ... />} />

to

 <Route exact path='/' render= ... />} />

With this change when the route path matches the ‘process.env.PUBLIC_URL’ (reponame + ‘/’) it will render your firstwebapp component

Mosora

This worked like a charm! This should be marked the ultimate answer, as homepage is needed, but this is a must later – Salliesallow

Answer 3

go to your package.json file where you can see

"private": true,

Make it false

"private": false,

This is work for me

Ats

Answer 4

you may have a problem with your homepage url in the package.json folder. what i did to solve the issue was to replace the url with the github pages url and that fixes it and also make sure that it is in the top level key/value pair

Toneless

Thanks this really worked, but fetch is not working now – Fishman

Answer 5

We need to add basename to router as shown below and point it to repository name.

 <Router basename="/test_repository"> //add basename
  <Switch>
    <Route path='/' exact component={Home} />
    <Route path='/about' component={About} />
    <Route path='/services' component={Services} />
    <Route path='/contact-us' component={Contact} />
  </Switch>
 </Router>

another problem is if you try other URLs like ‘/about’ this will show a 404-page error.

for this, we need to create 404.html which will handle this error & need to add some code snippet in index.html

Check the below article for the further solution:

deploy-react-app-with-react-router-to-github-pages-blank-404-page-problem-solved

Xylem

You appear to be affiliated with the linked site. When linking to your own site or content (or content that you are affiliated with), you must disclose your affiliation in the answer in order for it not to be considered spam. Having the same text in your username as the URL or mentioning it in your profile is not considered sufficient disclosure under Stack Exchange policy. Also note that even with disclosure, linking to your content too often is a problem. A couple of answers should be the limit. – Rosina

Answer 6

I had the same issue. I was able to fix it after I saw the error in the console. In my case the error was with the https request. I had added a script link in index.html with 'http' when I changed it to 'https' it worked perfectly fine.

And don't forget to commit and push the changes and run deploy again..

Abie

Answer 7

I had the same issue with mine. I was just getting a blank page but I saw the React Logo and my site name in the browser tab.

What fixed it for me was changing my package.json file. I originally had my "homepage" as http//... but when I changed it to https// it worked fine.

Body

Answer 8

Make Changes in "package.json" file by adding a line

Before adding line -->

{
  "name": "react-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {

After adding line -->

{
  "name": "react-ui",
  "version": "0.1.0",
  "private": true,
  "homepage":"./",  //add this line
  "dependencies": {

now create build once again and deploy and test it. it works in my problem.

Paapanen

Answer 9

Github pages will not execute any serverside code. You may only upload static files (html,css,js, images, etc.).

In order to have a hosted backend, you should look for another service like Google Cloud, AWS Lambda, Heroku, etc.

OR, you can use GitHub action to deploy apps in VPS on Github

Udale

React is not server side code. – Cattle