I have a problem when I try to deploy my react app to GitHub pages, it shows an empty page, blank.
in my GitHub, I see some files but not the source itself.
I used yarn to deploy.
here is the package.json file:
"name": "monsters-relodex",
"homepage": "https://eliranma.github.io/monster-rolodex",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"gh-pages": "^3.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn build",
"deploy": "gh-pages -b master -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Try changing
this "deploy": "gh-pages -b master -d build"
to "deploy": "gh-pages -d build"
if the problem still exists, I think the problem is that you don't have the actual sourcecode on your your master branch. Commit the code (the src folder) itself on the master branch and try again.
Related
I'm currently trying to deploy my react app toGitHub Pages, but I'm receiving a 404 error or not loading the app. Everything runs fine on my local host. I'm not too sure if this is the problem, but I think I'm not properly calling my app or root from the index.html. Also I'm not sure if this is the problem.
Here is my github page https://github.com/mohbadrus/badrus.github.io
here is my package.json
{
"homepage": "http://badrus.github.io",
"name": "clown-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^4.0.0"
}
}
I am making simple react.js app using react-table.
I tried to run it locally using npm start and it is working fine.
But when I tried to deploy it on github pages, it just shows a blank page. I have followed all the steps for deploying react app on gh pages.
Here is the gh repository : https://github.com/7phalange7/react-table
the main branch has the project code, and gh-pages branch is deployed on github pages.
Should there be a problem deploying react-table on github pages ?
package.json for reference
{
"name": "react-table-example",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"web-vitals": "^1.1.2",
"homepage": "https://7phalange7.github.io/react-table/"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
}
}
Edit :
still not sure what is the issue here, but I copied all the code to a new react project and then deployed on github pages and it is working fine now. I guess since this was the first time deploying react project, somehow I messed up something.
try changing the private to 'false' in your package.json
I just created React App by "npx create-react-app", and then when I do "npm install redux" or "npm install --save-dev redux" or "npm install --save redux" - it just does not modify the package.json
I tried the same thing with "react-redux", "react-thunk"... And still... The package.json remains the same.
I do not know how to fix this.
Please, help.
"name": "basic_redux_setup",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Make sure you are on the right directory while executing the NPM scripts, which must be the same directory where the package.json file is located.
just finished a huge app and tried to deploy it on github but it started throwing 404 errors. I tried to create a fresh new one with just one change in the HTML (just to see that is customized) and it's throwing the same error. The dev version works, the production not.
Here is the error:
DevTools failed to load SourceMap: Could not load content for chrome->
extension://hgmhmanijnjhaffoampdlllchpolkdnj/js/lib/purify.min.js.map:
HTTP error: status code
404, net::ERR_UNKNOWN_URL_SCHEME favicon.ico:1 GET
https://kirilchristov.github.io/favicon.ico 404 manifest.json:1 GET
https://kirilchristov.github.io/manifest.json 404 manifest.json:1
Manifest: Line: 1, column: 1, Syntax error.
Here is a link to the repo: Github Repo
Here is the package.json with the scripts:
{
"home":"https://kirilchristov.github.io/renker",
"name": "gr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy":"gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You need three things for CRA to work on gh-pages
A branch with the prod files (default is gh-pages)
✅ You have that (I checked)
Settings enabling gh-pages and select the branch if not default and serve from root
✅ You have that as well, you say
The homepage key inside your package.json
❌ You have home instead of homepage https://create-react-app.dev/docs/deployment#building-for-relative-paths
Try fixing that in your package.json
{
"homepage":"https://kirilchristov.github.io/renker",
"name": "gr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy":"gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I seem to be having some trouble with Github. I would like to update the master branch, which is my old io_page, with a new io_page. My only problem now is that the page will not show the new_io page. I've tried using the build file several times (the new_io page is built in react) but the page doesn't work on the master branch. However, it previously worked on the gh-pages branch. I also set the homepage in the package.json to the domain name that I'm using.
My GitHub: https://github.com/Taniyah-L-Jackson/Taniyah-L-Jackson.github.io
What is currently showing: https://taniyah-l-jackson.github.io/
My package.json file:
{
"homepage": "https://taniyah-l-jackson.github.io/",
"name": "cra-io-page",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"gh-pages": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Update: The page is working now. I had to change the scripts from
"deploy": "gh-pages -d build"
to
"deploy": "gh-pages -b master -d build",
and then re-deploy the build
Reference: https://medium.com/swlh/deploying-react-apps-to-github-pages-on-master-branch-creating-a-user-site-bc96c2a37dc8