I'm following instructions from https://github.com/gitname/react-gh-pages to deploy my react app to github pages.
At the link I'm getting a blank page though and a 404 error:
Failed to load resource: the server responded with a status of 404 ()
My app works on local host
I searched around and its likely my homepage link that is wrong?
link to my repo: https://github.com/PatgioK/pathfindingvisualizer
link to the app: https://patgiok.github.io/pathfindingvisualizer/
here is my package.json:
{
"name": "pathfindingvisualizer",
"version": "0.1.0",
"private": true,
"homepage": "https://patgiok.github.io/pathfindingvisualizer/",
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"gh-pages": "^3.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"save-dev": "0.0.1-security",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
Try specifying the branch in the deploy script by adding -b SomeBranchName in your packages.json.
so:
"scripts": {
...,
"deploy": "gh-pages -d build -b SomeBranchName",
...
Where is your static folder in your repo? This is what your 404 page is complaining about it. I checked your GitHub repo and I don't see either.
Related
So, I followed a blog I found online to make React and Express server run on the same port and run using a single command (yarn start). The thing is, after doing some configurations based on the blog, my react app can't do hot reload and doesn't update my changes while editing the code even though I tried to refresh it. I have to close the server down and do yarn start in order to see the updates. I tried to follow some advice from stack overflow like creating .env file but it doesn't work. Can anyone please help??
package.json
{
"name": "react-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",
"axios": "^1.1.3",
"d3": "^7.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start-client": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start": "yarn run build && (cd server && yarn start)"
},
"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 tried creating .env file and putting
FAST_REFRESH = false
and I tried
if (module.hot) {
module.hot.accept();
}
both didn't work.
I expect my react-app to update upon changes made in the vscode
I have been working on deploying the website I am working on to github pages but It seems to return an empty div when deployed. when served with npx serve build it displays all information fine, and is displays on local host normally but just returns a blank div when deployed on github pages.
steps I took to deploy:
installed gh-pages
added "homepage" to package.json
npm run deploy
The package.json code is listed below incase there is an error in there
{
"homepage": "https://jonlev03-hub.github.io/media-pilot/",
"name": "media-pilot",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"gh-pages": "^4.0.0",
"package.json": "^2.0.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"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": {
"github-pages": "^0.1.0"
}
}
and if you can't find any issues in that block of code all the code for the site is located inside my repository at github.com/jonlev03-hub/media-pilot .
This was an issue relating to the use of I hadn't specified a baseurl for the router to work with.
I have React project, created on MacOs and i want to run it on win10, but win10 computer in corp's LAN, so i cannot use "npm install" to download all dependencies. Hence i got all of them and builded project via Git, so for now on win10 i have all files are needed to "npm start".
But here are several errors, when i tried to run dev server or builded project:
npm start (== "react-scripts start")
'react-scripts' is not recognized as an internal or external command
npm start (== "node node_modules/.bin/react-scripts start")
Unexpected token '.'
Non of additional slashes before .bin to screening not helped.
npx serve -s build
network to registry.npmjs.org/serve failed.
Unclear why it needs internet at all, i just want to run builded project.
All of advices are to run "npm install" before "npm start", but i cannot connect to central artifactory from our LAN and i already have all of dependencies.
Hence, there are way to just start dev server or pack all project's files in some analogue of .jar totally without internet?
package.json
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.1.0",
"#material-ui/core": "^4.11.0",
"arui-feather": "^18.4.0",
"axios": "^0.21.0",
"core-js": "^3.7.0",
"date-fns": "^2.0.0-beta.5",
"material-table": "^1.69.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router": "latest",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"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"
]
}
}
I'm trying to deploy a react app on heroku but after deploying it on heroku its showing blank page,I've also created this app using buildpack mars/create-react-app
This is what I'm getting on deployed project:
Here's my package.json file:
{
"name": "covid-19",
"version": "0.1.0",
"private": true,
"homepage": "covid-19-stats-by-anny-v3",
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"express": "^4.17.1",
"fetch": "^1.1.0",
"gh-pages": "^3.1.0",
"material-table": "^1.65.0",
"mui-datatables": "^3.3.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-social-icons": "^4.1.0"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"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"
]
},
"devDependencies": {
"react-scripts": "^3.4.1"
}
}
The reason behind this white screen is JavaScript files are loaded into the browser.
There is the publicPath setting in your Webpack configuration to tell an app what its root path is. In our example, that would be https://www.yourwebsite.com/
If set correctly, it will base links like above from that URL – and your application will load like expected.
Put this information is package.json file add these lines after version in package.json
"homepage":"your app link"
and build the application again it will work.
I added a custom command to run in my react scripts in my package.json file so that I can run an api server from there
{
"name": "appfrontend",
"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.1"
},
"scripts": {
"start": "react-scripts start",
"start-api": "cd .. && cd appbackend && venv/bin/flask run", # This is the command I added
"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"
]
},
"proxy": "http://localhost:5000"
}
But npm is not recognising this command. What seems to be the issue? Should I not be able to run my new script with
npm start-api
You'd need to use npm run start-api
npm only has a few specific commands it recognizes by default. https://docs.npmjs.com/cli-documentation/cli. Anything else you add to your package, you have to use npm run in order to get npm to recognize it.