I have a basic React app. No backend. I want to set it up on github pages. I followed this article, twice. https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089
Both times, Github Pages displays the README.md file instead of the index.html file in my public folder. Here is an image of the file directory for the app. Any thoughts?
Here is what I have in package.json if it matters:
{
"name": "react-blog",
"version": "0.1.0",
"private": true,
"homepage": "https://jackseabolt.github.io/react-blog/",
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy" : "npm run build&&gh-pages -d build"
},
"devDependencies": {
"gh-pages": "^1.0.0"
}
}
Your issue is likely that you are using your master branch as the source. In the settings tab on your Github project page, change the source to use the gh-pages branch.
See https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#step-4-ensure-your-projects-settings-use-gh-pages
Related
I want to install a package with the latest version whenever I run npm install without specifying a version. e.g. react-datepicker in the following file.
{
"name": "example",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-datepicker": "^2.15.0",
"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"
}
}
Should I update the version every time when "react-datepicker" releases a new version?
I have created the react application using npx create-react-app task-tracker and this is my package.json file when ever I run npm start it shows error. As I am new to React I hardly have any knowledge about it.
this the error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2021-04-19T15_13_05_651Z-debug.log
package.json:
{
"name": "task-tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3"
}
}
It seems like create-react-app did not add the "scripts" field to the package.json object. I would try adding this field to package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
If that doesn't work, try running create-react-app again
I am trying to host my react application with Netlify but when I run npm run build I have this error
npm ERR! missing script: build
This is my package.json file
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
How can I solve it ?
When Netlify runs npm, it is unable to find the run command in your package.json, most likely because it is in the wrong directory.
Your package.json needs to be in the Base directory in your Netlify config.
I try to deploy my react web app to github pages but when i can't find website online
In the console, it says that the app is ready to publish and i should run command npm run deploy but i see the same message every time i run that command
Here's package.json file:
{
"name": "weather-app",
"version": "0.1.0",
"private": true,
"homepage": "http://shotiko-forecast.github.io/weather",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-scripts": "1.1.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"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 op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
install dependencies to the project.
> npm i gh-pages
In your package.json add script and homepage
"homepage": "https://username.github.io/repo-name",
"scripts": {
"deploy": "gh-pages -d build"
}
run build Script to build for production
npm run build
run deploy script to deploy your code to the-pages it automatically push on git-hub gh-pages branch and auto-selected on gh-pages branch you can check settings > GitHub pages.
npm run deploy
now it time to check your
https://username.github.io/repo-name
The name of your React app is weather-app. I assume that the github repository for the app is named as weather-app. There is an error in your package.json file. The homepage property is set incorrectly.
It should be set as,
"homepage": "http://<<github-user-name>>.github.io/<<github-repo-name>>"
In your case, change weather to weather-app and everything should work fine
I'm new at React.JS and I have made some sample app to test it, in my site I've already have the call to bootstrap CDN so I don't need to call bootstrap again in my React APP, but when I run 'npm run build', in the output, bootstrap code is appended to the css file, how can I disable bootstrap in my project.
Thank you...
UPDATE:
This is my package.json file, I've already remove the call from this file, but it still appending bootstrap.
{
"name": "new-home",
"version": "0.1.0",
"private": true,
"homepage" : "home/newHome/build",
"dependencies": {
"#types/react-slick": "^0.23.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5",
"react-slick": "^0.23.1",
"reactstrap": "^6.5.0",
"slick-carousel": "^1.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Solved,
In index.js I needed to remove the import call to bootstrap, in my case I removed but I recommend just comment it.
Thanks everyone...
If you have not Ejected(which isnt recommended for newer react users) than you may not be able to see it in your package.json file, but on eject you will see it in there.