I'm trying to deploy a react app without any routing functionality. Just a single page app to github pages and everything worked successfully. I did'nt get any error while deploying but after deployment, the app is blank and when i check my console i see the following error
GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/css/main.aea680b0.chunk.css net::ERR_ABORTED 404
vicktor61.github.io/:1 GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/js/2.ed9a5867.chunk.js net::ERR_ABORTED 404
vicktor61.github.io/:1 GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/js/main.0913b291.chunk.js net::ERR_ABORTED 404
/VickTor61/indecision-sniffle.git/manifest.json:1 GET https://vicktor61.github.io/VickTor61/indecision-sniffle.git/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
I understand that the issue probably is because the gh-pages server could not get my files. But i still don't know why. please i will really appreciate a well detailed response.
This is my app link
https://vicktor61.github.io/indecision-sniffle/
and this is my package.json file
{
"homepage": "https://github.com/VickTor61/indecision-sniffle.git",
"name": "indecision-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"gh-pages": "^3.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-modal": "^3.14.3",
"react-scripts": "4.0.3",
"uniqid": "^5.3.0",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn 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"
]
}
}
And this is my github page where the whole app is hosted
https://github.com/VickTor61/indecision-sniffle/
As per the official docs, setting the homepage setting as follows in your package.json should fix the issue:
"homepage": ".",
In the docs it is stated:
This will make sure that all the asset paths are relative to
index.html. You will then be able to move your app from
http://mywebsite.com to http://mywebsite.com/relativepath or even
http://mywebsite.com/relative/path without having to rebuild it.
Guessing by the errors on the github page, the page is trying to load files which can't be found. I would say your homepage is wrong. It shouldn't be
"homepage": "https://github.com/VickTor61/indecision-sniffle.git",
it should be
"homepage": "https://vicktor61.github.io/indecision-sniffle",
as the page tries to load for example this file
https://vicktor61.github.io/VickTor61/indecision-sniffle.git/static/css/main.aea680b0.chunk.css
while it should be this file
https://vicktor61.github.io/indecision-sniffle/static/css/main.aea680b0.chunk.css
Related
I've created a reactjs app and I deployed it to github pages with the command npm run deploy this all works great and I can see my app running when i open it from the
settings>pages in my repo. However, I am trying to add a custom domain and this is causing me trouble. I configured the IPs and everything for the DNS according to gh-pages documentation and the DNS checks all pass when i add the domain name. But when i go to the domain in my browser I get all 404 errors like this:
Im thinking it could be something wrong with my package.json, I was thinking I need to change the "homepage" value to my new domain instead of the http://<Github-username>.gihub.io/<repoName>/ I set it to when i deployed the app? Ive tried this but it doesnt work to load the page at that url.
So Im wondering if anyone has run into this issue after deploying to gh-pages and then adding a custom domain?
this is my package.json:
{
"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"
}
}
I figured out the solution, I just needed to re-deploy my page with
npm run deploy
I am trying to publish my single page website to github pages, but I've run into an issue. When I go to the link for my website, it gives me a 404 error with this message: "File not found. The site configured at this address does not contain the requested file. If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file."
I've looked at the documentation, watched videos, and looked up other people who are having this issue, but nothing will solve it.
I have a main and a gh-pages branch. Right now I have it set to build from the gh-pages branch. If I change it to main I get the same issue.
Here is my package.json file:
"homepage": "http://bpyle02.github.io/portfolio",
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"aos": "^3.0.0-beta.6",
"autoprefixer": "9",
"gh-pages": "^3.2.3",
"postcss": "7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icon": "^1.0.0",
"react-icons": "^4.3.1",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-scroll-into-view": "^1.10.1",
"scroll-into-view": "^1.16.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"web-vitals": "^1.0.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b main -d build",
"start": "craco start",
"build": "craco build",
"test": "craco 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"
]
}
}
Here is the link to the repo: https://github.com/bpyle02/portfolio
You need to upload only the contents of your build folder to the gh-pages branch. I think it will benefit you to read about how GitHub Pages works.
The create-react-app documentation explains how to address your scenario:
https://create-react-app.dev/docs/deployment/#github-pages
Here's the most important information (without setting this before building your app, it won't work):
Open your package.json and add a homepage field for your project:
"homepage": "https://myusername.github.io/my-app",
Create React App uses the homepage field to determine the root URL in the built HTML file.
This might also be relevant to your app:
https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths
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 am trying to host my react application in Github Pages.
I've done the same thing with a Vue based project, and had no issues, but with React, things are different.
I have gone over the following tutorials:
Tutorial #1
Tutorial #2
I am able to deploy the application to Github Pages, but am seeing the following error:
Manifest: Line: 1, column: 1, Syntax error.
Yes, my manifest is found inside my public folder and I do not know where the problem originates from.
I've tried reading various SO questions relating to this subject, but haven't found anything that is relevant.
I also tried creating a vanilla react project and following the tutorials, but got the same issues.
This is my package.json file:
{
"name": "Random App Name",
"homepage": "https://github.com/TomerPacific/projectName",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.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": "^3.1.0"
}
}
What is happening here? Is the problem a configuration issue?
Thanks to #Kibonge Murphy's suggestion, I checked the request url for all the network requests being made and found out that it was wrong.
Instead of having the URL of the Github page as the homepage key in the package.json file, I put in the URL of the repository.
Meaning,
I should have put this : https://tomerpacific.github.io/projectName/
Instead of https://github.com/TomerPacific/projectName
In my case this error was caused by the fact that the server sent a 404 error page instead of the manifest. In the sources tab of Chrome dev tools click on the file that is your manifest and confirm it's not a error page.
I pushed my one page React project to github pages. While the page appears, it doesn't function correctly. It's a basic app where users search through an API and then when they click on a movie it is added to their watchlist. However when I enter my query through the search, nothing happens as opposed to local host where the movies appear and everything functions correctly.
When I inspect it via the console, I get the following error:
The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.
Here is my package.json
{
"name": "watchlater",
"homepage": "https://myusername.github.io/watchlater/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^4.5.3",
"gh-pages": "^3.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.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"
]
}
}
Is there something else I need to change? I followed the instructions here(https://create-react-app.dev/docs/deployment) to publish it on gh-pages but the actual functionality doesn't work.
this error is called "mixed-content" You are trying to access via "HTTP" on an "HTTPS" site because this vulnerable to eavesdropping attacks by hackers and this is a violation.
https://web.dev/fixing-mixed-content/
It turns out my API call had HTTP instead of HTTPS. I changed it to HTTPS and it now works.