I'm tryin' to learn reactjs and made a simple weather create-react-app project (https://github.com/zxcminusminus/react-weather/tree/master) which I'd like to deploy to Github pages using gh-pages. So my app worked perfectly on localhost but when I tryed to deploy it on gh pages I got blank page. To deploy it I added "homepage", "deploy" and "predeploy" fields in package.json just like in tutorials, ran "npm install gh-pages" command, then ran "npm run deploy" command. I read like 10 similar questions and followed some of the tips. But nothing worked(
Here is gh pages settings gh-pages
I tried adding "-d build" to deploy script like "deploy": "gh-pages -b main -d build"
I tried replacing Route with HashRoute from this index.js App.js to this index.js App.js
I tried some little changes like changing default path in Route from "/" to this <Route path={"/react-weather"} element={}/> but still blank page(
P.S. forgive me for these links instead of embedded images, stackoverflow says i dont have 10 reputation points yet:3
In this file you can see that paths start with / e.g. <script defer="defer" src="/static/js/main.0065d37f.js">
Paths in gh-pages must start with ./
homepage in package.json have to be set to ./?
You will also need to use HashRouter, because gh-pages doesn't redirect all traffic to index.html
Related
I deployed my react app on gh-pages. I thought I followed all the instructions, but when I open the link it's blank. Any guidance would be great.
Here is the deployed link:
Website
Here is the repo:
Github
I'm not sure what screen grabs would be useful, I'm not seeing anything in the console or anything odd in network.
It runs locally without any errors either. If I'm lacking information please let me know what would be helpful. I followed the steps I found for react gh-pages and googled what I could but I'm at a loss.
npm install gh-pages --save-dev
https://{username}.github.io/{repo-name}
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
npm run deploy
One thing I saw said to use Hashrouter, so I tried that. I tried from a new repo thinking maybe I'd done something incorrectly the first go around so I went step by step again. Help.
I think you need to do this in App.js:
<Route path="/erika.zibelnik" element={<Home/>}>
Also, not sure if this error in the Console is related:
Origin trial controlled feature not enabled: 'interest-cohort' in static HTML page
When trying to host my webpage with a three.js background, everything loads properly when hosted locally but as soon as I push it up to github pages nothing loads - just html.
I am using vite to package my code, and gh-pages to deploy the 'dist' folder to the hosted branch. I have tried changing the urls of all images and assets to '/image' and storing the images in a public folder inside the root folder, as vite recommends. I run
$ npm run build, and
$ npm run preview
and everything looks good. I run npm run deploy (I added a deploy script in package.json, deploy: 'gh-pages -d dist'), and then host the gh-pages branch on github pages and only the html shows up, and the console shows multiple 404: file not found errors.
Repo
The hosted code is on the gh-pages branch, if that hasn't been clear already.
The url to your JS and CSS files is wrong.
Your github page is trying to load the the JS from https://talmage89.github.io/assets/index.2e5bc2a5.js...
But it should be:
https://talmage89.github.io/ThreeJSDemo2/assets/index.2e5bc2a5.js.
The Vite documentation hss specific instructions for setting the base when hosting on Github Pages
I have created react application using create-react-app when I start "npm start" it is running using localhost:3000 in browser which is fine. But, when I click index.html from project folder it is showing blank page. Can you suggest me solutions on how to run react application using index.html file
Add "homepage": ".", to the top of your package.json file. Then build with yarn build or npm build. Go to build/ folder and double click on index.html.
EDIT:
Opening the app via index.html needs "homepage": "." in package.json because without it Webpack tries to load the static files from the root the file system rather than build directory. Reference
You can run npm run build, then go to the “build” folder where a working index.html will be located. The index.html in the project folder isn’t built for production/standalone use.
I've been trying to add my React App project to Github Pages for a week. After all the prep work and everything that need to be done, I finally got it to show up, well kinda. It actually doesn't show anything, nor does it give me errors. Which leads me to believe that my script
<script src="../dist/bundle.js"></script>
is the culprit. However, the problem is I've never once used bundle.js. I wanted to learn how to use React without using create-react-app, and in doing so I seem to have gotten to far along in the game I'm not even sure how this is supposed to work.
Here is the Github Pages in it's current form
https://kevin6767.github.io/redux-api-opendota2/
EDIT: It now seems to be showing a 404. I'm not even sure why this is not working at this point. I've tried to many different methods.
I am not sure how you uploaded your React application to GitHub Pages, but, here, I will be mentioning the correct way to do it:
Step 1: Install gh-pages via the terminal, making sure you are in the correct file directory.
$ npm install gh-pages --save -dev (We are saving it as a dev dependency)
Step 2: Go to your package.json and add
"homepage": "<YOUR_GITHUB_USERNAME>.github.io/<REPO_NAME>," above the "name"
Step 3: In the "scripts" section of package.json, add
"predeploy": "npm run build", "deploy": "gh-pages -d build",
Step 4: Assuming that you have already committed and pushed your code to your Git Repo, now, in the terminal, use the command npm run deploy to see the changes in your GitHub Pages.
Also, make sure that in your source code, you have set the same route for the homepage as in the package.json.
I've tried the following:
Added homepage to package.json
npm install gh-pages --save-dev
npm run deploy
When I ran "npm run deploy" it returned the following message:
$ npm run deploy
> myportfoliosite#0.1.0 predeploy C:\Users\Ar\AppData\Roaming\npm\node_modules\create-react-app\myportfoliosite\myportfoliosite
> npm run build
> myportfoliosite#0.1.0 build C:\Users\Ar\AppData\Roaming\npm\node_modules\create-react-app\myportfoliosite\myportfoliosite
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
./src/App.js
Line 3: 'download' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
73.02 KB build\static\js\2.f6e5e996.chunk.js
19.04 KB build\static\css\2.b1979bb4.chunk.css
797 B build\static\js\runtime~main.4f085a03.js
152 B build\static\js\main.a0a932a3.chunk.js
The project was built assuming it is hosted at /InquisitiveDev2016/ReactDeveloperPortfolio/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
I turned on GitHub pages for the "gh pages branch" and it gave me a website link # https://github.com/InquisitiveDev2016/ReactDeveloperPortfolio
However, the link is returning a blank page.(It did show the Readme section before but now it is completely blank).
I'm not sure why it is not giving me a link that displays my react app.
The homepage field in package.json is supposed to point to the URL at which you are hosting the github page.
In this case, that is: https://inquisitivedev2016.github.io/ReactDeveloperPortfolio/
Docs
Currently it points to the github repository
I am assuming u have added the following lines in your package.json file
"homepage":"https://{Your_Github_Username}.github.io/{repo-name}", //outside dependencies
"scripts": {
.
.
"predeploy":"npm run build",
"deploy":"gh-pages -d build"
}
I was able to fix the issue 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 after you have found the error and run deploy again..