Tried uploading my react project to github pages but when clicked on it shows me an incorrect page - reactjs

tried uploading react project and it directs me to this other page.
enter image description here
the image above is what happens when i click on githu pages.
the following is my package json file,
I tried npm run deploy but it doesnt do nothing to the github page.
{
"name": "leslie-creations",
"version": "0.1.0",
"private": true,
"homepage": "https://jflo25.github.io/CreationsByLeslie/",
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#material-tailwind/react": "^1.2.5",
"#mui/icons-material": "^5.11.0",
"#mui/material": "^5.11.3",
"#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-icons": "^4.7.1",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"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",
"tailwindcss": "^3.2.4"
}
}
tried changing the homepage to "homepage": "https://jflo25.github.io" but when i do so and run npm run deploy it doesn't seem to do anything. Any suggestions on how i can fix this or just start over with a new repo? This my first time trying to upload a react project through vs code terminal and cant figure it out.

Related

Deploying React App to GitHub Pages only showing README.md file

I've been trying to deploy a React App to Github Pages, and have followed a few tutorials, however I can't seem to find the gh-pages branch that the site gets built from, only the master branch shows up.
When I deploy the app, only the README.md file shows up, or I get a 404 error. My package.json looks like this:
{
"name": "portfolio",
"homepage": "https://samarqureshii.github.io/",
"version": "2.0.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.6.2",
"#mui/material": "^5.6.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"ajv": "^8.11.0",
"classnames": "^2.2.6",
"moment": "^2.29.4",
"node-forge": ">=1.3.0",
"object-path": "^0.11.8",
"postcss": "^8.4.14",
"postcss-normalize": "^10.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"sass": "^1.54.5",
"typescript": "^4.7.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"
},
"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 Screen when running npm build and only error is 'Uncaught TypeError: Expected parameter accessToken'

This is my first time using the Contentful API to create a blog. When I run it in my local environment with npm start, it works and looks great. When I try to run this through Vercel, Netlify, or Github Pages, there is only a blank screen with this error message in console.
error message in console
I have tried reworking my client.js file, adding in the environment variables from my .env.development file to the host sites, changing the homepage to numerous things, everything has no effect on the blank screen of my build. Here are screenshots of my client.js:
import * as contentful from "contentful"
export const client = contentful.createClient({
space: process.env.REACT_APP_SPACE_ID,
accessToken: process.env.REACT_APP_ACCESS_TOKEN
})
.env.development code:
REACT_APP_SPACE_ID=************
REACT_APP_ACCESS_TOKEN=*************************
and my package.json:
{
"homepage": ".",
"name": "chasing-ravens",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^2.0.13",
"#chakra-ui/react": "^2.4.2",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"contentful": "^9.2.14",
"dompurify": "^2.4.1",
"framer-motion": "^6.5.1",
"marked": "^4.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"sass": "^1.56.2",
"swiper": "^8.4.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"
}
}
Any help would be so appreciated, I feel like I am going in circles here.

404 error deploying reactjs app on github pages to a custom domain

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:

react js run build wrong homepage

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

Deployment of a react app stopped working on GitHub pages

I am doing a React app which I deploy on GitHub pages. https://asaroz.github.io/DCI_Hackathon_TeamE
Deployments worked without much problems before, but now the console gives me this:
the path to the file seems to be correct:
I deploy with the npm module from GitHub pages.
{
"homepage": "http://asaroz.github.io/DCI_Hackathon_TeamE/",
"name": "my-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",
"bootstrap": "^5.1.3",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-simple-image-slider": "^2.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": "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"
}
}
I sadly have no clue what the exact problem is. Perhaps the Response gives me a hint, but I just don't know that much about Response errors jet. Thanks in advance.
Ok github pages didn't update/deploy my changes. I don't know why. I fixed the issue by editing a useless space into the file in question on github.

Resources