So i have published my react js app with GitHub pages, however, when I run the command npm run build, it appears the following:
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
my package.json is the following
{
"name": "sleepypower.github.io",
"version": "0.1.0",
"private": false,
"homepage": "https://sleepypower.github.io",
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-multi-carousel": "^2.8.2",
"react-particles": "^2.1.3",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-tsparticles": "^2.1.4",
"tsparticles": "^2.1.4",
"tsparticles-engine": "^2.1.3",
"web-vitals": "^2.1.4"
},
"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",
"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"
}
}
It should be that it is hosted at https://sleepypower.github.io
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 getting 404 errors loading my react js app Ive deployed through github pages. I added a custom domain and I was getting DNS errors but ive resolved them and Im still unable to load the page. Im not sure what Ive done wrong.
To deploy to github pages I ran : npm run deploy
Then I added my custom domain and resolved the errors by adding the github IP addresses to the A records as shown in the documentation :
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
The errors Im seeing in the console are all on the .js, .css and manifest.json files. And my DNS check has been successful, Im not sure how to find whats gone wrong.
My package.json looks like this:
{
"homepage": "http://CRJones7.github.io/learned",
"name": "learned",
"version": "0.1.0",
"private": true,
"dependencies": {
"#primer/octicons-react": "^17.9.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"jquery": "^3.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"reactstrap": "^9.1.5",
"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"
}
}
{
"homepage": "http://CRJones7.github.io/learned",
"name": "learned",
"version": "0.1.0",
"private": true,
"dependencies": {
"#primer/octicons-react": "^17.9.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"jquery": "^3.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"reactstrap": "^9.1.5",
"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"
}
}
My errors look like this:
i create app with command npx create-react-app my-app --template typescript.
Then i made all steps to add it to gh pages - like usual - add homepage,scripts, deploy it etc.
The only problem is that it didnt worked.
It didnt work on my project so i create empty cra like this and it dont work also. I dont know what can be issue.
Page shows info
Loading failed for the with source “https://siemacotam.github.io/static/js/main.aa2ba350.js”.
this is package.json
{
"homepage ": "http://siemacotam.github.io/portfolio2",
"name": "portfolio2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.25",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"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",
"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"
}
}
any ideas ?
This question already has answers here:
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'
(3 answers)
Closed last year.
I have just started react. My page works fine on localhost.
Now I am trying to host my page on github. I have used "npm run deploy" but it doesn't work. it appears 2 errors:
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
You need to enable JavaScript to run this app.
This is my package.json
{
"homepage": "http://khanh0709.github.io/dolla",
"name": "dolla",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-scroll": "^1.8.4",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.4"
},
"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",
"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"
}
}
Maybe these are not error. I have wait visual studio deploy it for 1 hour. And, it work
I've been looking at many forums for a solution but haven't found any. I'm not sure what I'm doing wrong.
I'm using react and styled components to create a website on GitHub Pages, but i keep getting a blank page and a 404 error in the console which is:
"Failed to load resource: the server responded with a status of 404 ()"
"main.79bf5a2e.js"
My repository: https://github.com/Visibyte/Space-Tourism
My package.json
{
"homepage": "https://visibyte.github.io/space-tourism",
"name": "space-tourism-react",
"version": "0.1.0",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"
},
"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": "^3.2.3",
"styled-components": "^5.3.3"
}
}
Any help would be much appreciated, thanks.