How To Use A React Page For a Github Domain Page - reactjs

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

Related

React.JS build works in dev server but not in AWS Amplify when anything changes in package.json

I am a little bit perplexed here as I attempt to launch my first react project online.
I'm using AWS Amplify, I have connected my github repo, and have everything linked together, from VS Code I can push to my github, which then after a minute or so displays the changes inside of my AWS Amplify website, so I believe I have the vscode - GH - amplify pipeline operating properly...
I initialized a base react app, on the AWS site and it works as expected,
The dev server on localhost displays the same spinning logo and
Edit src/App.js and save to reload
I then added some extra random text as a test, within the app.js,
It added my hello world test text in the localhost. I push it to GH, it then appears exactly the same on my Amplify site as it does on dev server. the same react initial page but now both have the test text. I then delete all the components of the app.js
add a simple header nav bar, update package.json to include a couple dependencies (chakra-ui) and then the whole thing breaks.
I'm sorry if this is a dumb question but do I need to do anything outside of vs code, in order to have the package.json updates not ruin the compiling?
In VS Code i need to npm install packages do I need to do this somewhere inside AWS Amplify?
here is the json that works fine
{
"name": "react-amplify-app",
"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",
"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"
},
"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"
]
}
}
I then try to add the JSON file from my full react project where i made a decently involved (for me anyway) website.
Here is the updated JSON that makes it not work anymore
{
"homepage": "https://avarga1.github.io/My-Portfolio/",
"name": "myreactportfolio11",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/core": "^0.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"iframe-resizer": "^4.2.11",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-s3": "^1.3.1",
"react-scripts": "^5.0.1",
"scripts": "^0.1.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"gh-pages": "^4.0.0"
}
}
What am I missing???
Thanks in advance.

unable to deploy react app to github pages displaying readme file

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"
}
}

Blank page when deploying react-table on github pages

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

Cannot deploy fresh create-react-app on Github Pages

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"
]
}
}

Problem when deploying React app to GitHub pages

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.

Resources