Home
Support Forums

Blank page when deploying sample react app from Github

Hi All

I am new to this and trying to deploy the boilerplate react app (with a tiny bit of text)

I have done everything I can to try and work this out but still getting a blank screen when I deploy from git hub. I have followed instructions from GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages</t (Lots of times(just in case i did it wrong))

This is what I have done.

link - https://eager-khorana-23949c.netlify.app

1- created empty repo on git hub neamed react-gh-pages (noticed it initialises a git repo anyway)
2- created react app with npx create-react-app react-gh-pages (with gitbash) and cd to react-gh-pages
3-opened in vs code and added ‘please work’ toApp.js to id
4-done npm install gh-pages --save-dev
5- added “homepage”: “http://fredferret.github.io/react-gh-pages”,
and “predeploy”: “npm run build”,
“deploy”: “gh-pages -d build” to appropriate places in package Json & saved
6-git init and got ‘Reinitialized existing Git repository in C:/Users/adejo/Desktop/DEPLOY ISSUE/react-gh-pages/.git/’
7-git remote add origin https://github.com/fredferret/react-gh-pages.git
8-npm run deploy.
9- npm start to check, all good
Build was successful

10- over to Netlify to deploy
11-new site from Git
12-Continuous deployment GitHub
13-react-gh-pages
deployed to gh-pages branch and did not touch the basic build settings.
BLANK PAGE!! :-/

could anyone point me in the right direction. I know you will want to see code details, so can you let me know what you need to see and ill send.

Many Thanks

and I have just noticed GitHub - FredFerret/react-gh-pages works, but
https://eager-khorana-23949c.netlify.app does not? I am confused!! :-/

Welcome to the forums @FedFerret

The reason it does not work on Netlify is all sources are linked from /react-gh-pages sub-directory e.g.

<script
  src="/react-gh-pages/static/js/main.472e1b15.chunk.js"
></script>

When published on Netlify, everything is linked from /, unlike when publishing to GitHub Pages.

What is in your git repository is not the React app, but the output of building the app.

For reference, here is Netlify’s Create React App docs and associated Deploy React Apps in less than 30 Seconds blog post. I also have a repository @coelmay/netlify-react-bare for reference too.

1 Like

Thank you for this. This kind of makes sense, I think I understand what you mean (I still have a LOT to learn)

I have already read the documentation that you sent (lots of times, lol) but I’m still stuck. I know I could clone the coelmay/netlify-bare repo, edit and use that,

but I have an app that I am trying to get online. Could you tell me what I need to do to be able to get it so I can deploy on Netlify please?

Sorry if I’m being a pain but I need to understand this.

Many Thanks

As mentioned, what you have in your git repository is (it appears) the output of a React app. So the simple thing is to push your app code to GitHub (like what is in the basic repository I shared), connect the repository via the Netlify UI and deploy.

Given you have used GitHub Pages, you will have "homepage" set in your package.json which is why the output doesn’t work on Netlify (the /react-gh-pages/ path on all src attributes.) You will need to remove that from the package.json.

1 Like

Yep! thats done it.

Thanks so much!

Have a good one!