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..

GET parthaaaaa.github.io/firstwebapp/Parthaaaaa.github.io/… net::ERR_ABORTED 404 — varoons
– varoons, Commented Jan 29, 2019 at 18:52
Thats the error I get when i load that page. It cannot load the final bundle of your app — varoons
– varoons, Commented Jan 29, 2019 at 18:57
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 — Partha
– Partha, Commented Jan 29, 2019 at 19:06

varoons · Accepted Answer · 2019-01-29 19:28:13Z

31

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

answered Jan 29, 2019 at 19:28

varoons

3,8871 gold badge18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anusreemn Over a year ago

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

Ahmad Safa Jan 9 at 23:25

Been trying to solve this for a while. This worked. Thank you.

mehamasum · Accepted Answer · 2019-01-29 20:06:19Z

20

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

edited Jan 29, 2019 at 20:06

answered Jan 29, 2019 at 19:33

mehamasum

5,7622 gold badges26 silver badges31 bronze badges

4 Comments

mehamasum Over a year ago

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

Partha Over a year ago

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

mehamasum Over a year ago

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

mehamasum Over a year ago

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 :)

Vivek javiya · Accepted Answer · 2021-06-24 14:19:11Z

12

go to your package.json file where you can see

"private": true,

Make it false

"private": false,

This is work for me

answered Jun 24, 2021 at 14:19

Vivek javiya

1972 silver badges5 bronze badges

Comments

Daniel · Accepted Answer · 2021-05-03 14:24:36Z

3

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

answered May 3, 2021 at 14:24

Daniel

712 bronze badges

1 Comment

Prakash Reddy Potlapadu Over a year ago

Thanks this really worked, but fetch is not working now

Jacob Lee · Accepted Answer · 2021-04-29 01:13:55Z

1

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

edited Apr 29, 2021 at 1:13

Jacob Lee

4,7302 gold badges20 silver badges40 bronze badges

answered Apr 28, 2021 at 15:55

Suraj Raccha

392 bronze badges

1 Comment

cigien Over a year ago

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.

user13116294 · Accepted Answer · 2020-09-28 13:27:01Z

0

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..

answered Sep 28, 2020 at 13:27

user13116294

Comments

Marley Anthony · Accepted Answer · 2021-01-26 17:05:30Z

0

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.

answered Jan 26, 2021 at 17:05

Marley Anthony

1

Comments

Jatin Yadav · Accepted Answer · 2024-06-11 03:01:34Z

0

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.

edited Jun 11, 2024 at 3:01

answered Jun 8, 2024 at 7:20

Jatin Yadav

11 bronze badge

Comments

nextloop · Accepted Answer · 2021-09-17 01:23:11Z

-2

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

answered Sep 17, 2021 at 1:23

nextloop

3603 silver badges11 bronze badges

1 Comment

Maximillian Laumeister Over a year ago

React is not server side code.

Collectives™ on Stack Overflow

Getting blank page after react app publish in github

9 Answers 9

2 Comments

4 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

4 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related