I am using a react protfolio template, and the single page app, loads perfect when I host it locally. But when I try to host on github pages, it shows me the read me file (I guess because no copy of the index.html file in the root), but even then I make a copy of the html file in the root, it just shows me a blank page.
Why the big difference between what I see localy and how it is displayed on github pages? How do I fix this?
Here is the code:
https://github.com/davidlindercodes/Ultimate-React-Portfolio
Thank you
This is because, you didn't build your React app or create gh-pages branch.
What you have to do
You have to build your React app and move the files in dist folder to a branch called gh-pages. Then Github Pages will render the index.html in the gh-pages branch.
Refer How to deploy React App to GitHub Pages
Related
I am learning to deploy different react apps on different hosting platform. So I cloned this repo Cloned Repo and run it locally and it works fine, so I am trying to deploy it on netlify.
Based on the repo this is how I configured the build settings on netlify
But after It finished deploying and I preview the deployed live link, the page is just blank without any error, Though I feel it's not routing to the main page based on the project webpack.config.js, but I don't know exactly what to do?
So the problem is that, in netlify, you have already mentioned your publish path as dist. But in your index.html, you have mentioned the script src as /dist/example.js.
We just need to modify the script src in index.html as example.js instead of /dist/example.js since we are already inside dist folder.
index.html
<script src="example.js"></script>
When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page
The page I am trying to deploy is here: LINK
I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me
I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?
*Edit*
Found out that the site is trying to get the .js and the .css from the wrong place.
I just don't know what I am doing wrong...
Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to the vite.config.ts file.
Source: https://vitejs.dev/guide/static-deploy.html
The images were not loading, I used this to fix them:
Github pages vite JS build not showing the images
I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:
First things first, make sure that your ".git" folder and your project are in the same folder.
Run npm run build. You should have a dist folder now.
Open the file vite.config.js (or .ts).
Add the base file with your repository name. Include the two /.
Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.
export default defineConfig({
base: "/react-beautiful-dnd/",
plugins: [react()],
});
Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
git add .
git commit -m "deploy"
git subtree push --prefix dist origin gh-pages
Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd
In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.
That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.
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.
So I have a reactjs app publish in github pages, is this one https://bernardoolisan.github.io/PyOcr/
The problem is that the app fetch data, but when I deploy it on github pages it give this error:
And it was working:(
And now my page doesn't work too, it was working but right now is blank i dont know why
I guess you are deploying the react project the wrong way to hosting providers such as github or netlify . First you must build your react project and then only push the files inside the build folder to hosting provider . Github pages can only serve static html css js files so it can only serve the build folder of your react project .
Note
To build a react app you can run npm run build and a build folder will be generated . Then you can push the files inside of the build folder to github repository and enable github pages for it .
I was having a similar issue, and I too though gh-pages can't fetch data. But what I did was I added cors to my server. I allowed cross-origin requests. Now it retrieves data from my server on heroku.
After taking a look at console, i got this
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.js”.
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.js”.
Link to my Repo : https://github.com/Abhishek-098/TourSpot
For deploying a Single-Page Application (React, Vue) to GitHub Pages, you should know that it is necessary that you do a production build. This can be accomplished by doing npm run build or yarn build depending on the package manager you are using. This command will generate a ./dist or ./build folder that will contain your react app in pure HTML, CSS, and JS.
For GitHub pages, there are some configurations you should do. First of all, the index.html from your production build (from the dist, build folder) should be in the root folder, which means, you should be able to see it when you open the repo (not inside the build folder). If GitHub pages do not detect any index.html in the root of the repo, it will display a 404 page.
Now, since you do not want the production build files messing around with your React project, it is recommended that you create a different branch for your GitHub pages deploy.
So, ideally, you would have two branches: master and gh-pages, the first one containing your React project and the second one containing only your dist folder but in the root of the project.
Here is an example of the structure of a Repo that it's deployed using GitHub pages.
https://github.com/8rb/React-Quiz/tree/master
You can see both branches and the deployment link works perfectly fine.
To configure the branch that is being deployed to GitHub pages, go to settings and select the branch where you have your production build.
All the information was taken for the following link:
https://create-react-app.dev/docs/deployment/#github-pages
I hope you found it useful!
#Rodrigo Ramirez does explain how its done, but leaves out some important information provided in the docs he linked (https://create-react-app.dev/docs/deployment/#github-pages). Maybe the've been updated since but I would recommend following those steps in the doc. They give step by step instructions that are very easy to follow.
I tried following #Rodrigo Ramirez answer, as well as, countless other things on the internet and nothing worked and it was all very complicated. The doc provided here gets it all done for you very easily.