React app deployment on github pages shows a blank page - reactjs

I'm just starting with react and I built my first application and now I'm trying to deploy it on github pages but the page is completely blank. The steps I followed are:
Install gh-pages: npm install gh-pages --save
Add homepage to package.json: "homepage": "https://milind452.github.io/my-reads/"
Add scripts: "predeploy": "npm run build", "deploy": "gh-pages -d build"
Deploy: npm run deploy
I can see that the gh-pages branch is created and a deployment is also created; but the page is blank and nothing shows on the console. I checked the sources in the dev-tools and all the files are there.
I also checked my repo pages settings and the source for deployment is set to gh-pages branch. I'm not sure what is happening.
I also checked out this stackoverflow question but none of the answers there seemed to solve it for me.
Here is the github repo and the deployment link

Never use BrowserRouter on GitHub Pages. There are some issues with it, it always shows blank screen. Use HashRouter instead, that will most probably work.
import { HashRouter } from "react-router-dom";
// some code here
return (
<HashRouter base="/">
<App />
</HashRouter>
)

The create react app documentation says that:
GitHub Pages doesn’t support routers that use the HTML5 pushState
history API under the hood (for example, React Router using
browserHistory). This is because when there is a fresh page load for a
url like http://user.github.io/todomvc/todos/42, where /todos/42 is a
frontend route, the GitHub Pages server returns 404 because it knows
nothing of /todos/42. If you want to add a router to a project hosted
on GitHub Pages, here are a couple of solutions:
You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
Therefore you should use hashHistory if you want to host your site on GitHub Pages.
Here is the link to documentation.
If you don't wish to change router, try deploying it on Netlify which is also another free hosting provider. But again for Netlify deployment, follow the documentation, which says:
To support pushState, make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200

Related

how to upload react project on github with routing?

how can i upload my React Project to GitHub with proper routing. When I upload to GitHub then I am testing that it properly working or not. then it is not working. I Don't know why this happened that Routing is not support on git hub pages.
Please any one help me, Can I upload my React project on Github with Routing or any other source where i can upload my React Project online and share that project Link?
Per the create-react-app docs:
You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.
To be honest, better to just use Netlify.
You can deploy your site with a GitHub repo or directly with:
npm run build
and then upload the build folder.
Or if you really want to use GitHub, you can use Github to deploy through Netlify. And about routing - routing is very easy in Netlify. If your using react-router-dom that listen up:
in your public folder add a _redirects file and add in:
/* /index.html 200
and then in your src folder add a file called netlify.toml and add:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

React app displaying blank page on github pages

I've been trying to deploy a react app on github pages but it keeps rendering a blank page. I've tried a few different things (changing https to http, starting a new repo) each time I've made a git push and waited a while for github to build it but even after hours there is no change.
https://github.com/Michael-ET/Reddit-reader
You changed the homepage property in package.json, but never re-built your app and pushed changes in the build to your gh-pages branch:
The pathname is still outdated in index.html.

Deploying react portfolio website on github user page

I was working on my portfolio and I build it using react and I thought to deploy this using GitHub pages.
So, I started deploying and I've followed pretty much every step given there 'Create React App / Deployment', but I was not able to see the desired result.
You can Check here at thisisnitish.github.io: It deploys the README and I tried everything to fix it but it shows the same result.
You can visit the repository at github.com/thisisnitish/thisisnitish.github.io.
Any help would be appreciated 😊.
Since https://hisisnitish.github.io returns 404, it means nothing has been published by GitHub.
That would be because of the configuring a publishing source for your GitHub Pages site.
Make sure to select the branch main, folder public in order to instruct GitHub to publish your page from those elements.
The OP adds:
there is only a root and docs folder like this
Then you might try, for testing, to generate your site in the docs/ folder, instead of public/.
Or to generate it in a separate branch.
On your package.json, change the deploy script
"scripts": {
... (other scripts)
"deploy": "gh-pages -b main -d build"
}
Moreover, do not push your entire repository on github pages. Only content of /build folder is important here.
Alternatively, you can build your react app locally
npm run build
Then upload/copy contents of /build (index.html etc.) to your repository.

How to put the app in a subfolder when using create-react-app in Development mode?

There are plenty of answers here, and blog posts elsewhere (including official documentation https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths) explaining how to build your react app so that it could be run from a subfolder.
However, I can't find a way how to run it from a subfolder while I'm still in development mode. (i.e. without running: npm run build)
I want to see the app running on localhost:3000/web when I execute: npm start. Not localhost:3000. The static resources that are injected automatically (such as
src="/static/js/bundle.js"
src="/static/js/1.chunk.js"
src="/static/js/main.chunk.js"
src="/main.947eb2055b7df4ce1a9e.hot-update.js"
) should have their path adjusted accordingly to include the app's subfolder name "web".
Is it possible?
Should I "eject" the app and config thing myself?
Should I clone and change "react-scripts start"?
Is there any simpler way?
Thanks
UPDATE:
I should have given more details. I do use reverse proxy "http-proxy-middleware" that's the reason I need to run each app in subfolder.
The suggestion below using "basename" of BrowserRouter works for links but not for injected static resources such us "/static/js/bundle.js" The "web" is not added to these when you use "basename", "homepage" and run as: npm start.
So when you run it behind reverse proxy on port 80 it tries to access localhost/static/js/bundle.js which doesn't exist. It should access localhost/web/static/js/bundle.js instead. But as those links are injected automatically I don't have control over adding "web" as a prefix.
When working with BrowserRouter you can achieve this, by just adding basename as prop.
From the docs,
The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
<BrowserRouter basename="/web">
//Your routes
</BrowserRouter>
Note: Also need to maintain an entry in package.json file as
"homepage": "http://Domain_name/web",

React app deployed to GitHub Pages gives "Site not found"

I'm trying to deploy a create-react-app to GitHub Pages, but I'm getting a 404.
404
There isn't a GitHub Pages site here.
What I've done:
Created a user site repo named <username>.github.io
Added "homepage": "https://<username>.github.io" to package.json (as per the Create React App docs)
Installed the gh-pages package
Added and ran "deploy": "gh-pages -b master -d build" to scripts in package.json
The contents of /build folder is successfully pushed to master, but the site isn't accessible.
The repo's GitHub Pages settings simply says:
Your GitHub Pages site is currently being built from the master branch.
User pages must be built from the master branch.
I also tried some routing solutions (this and this) without making any difference, although I don't think they are ment to fix the problem I'm having.
I'm not sure how to troubleshoot this any further. Any ideas?
Ok, so apparently you have to choose a GitHub Pages theme (even though you're not using it) in order for the page to be published. This seems very strange to me, and from what I can tell it's not at all mentioned in the documentation. 🤷‍♂️

Resources