I'm trying to publish a React app to Github Pages but all that pops up is a blank page when I attempt it. I'm new to React and not very bright.
Here is what my package.json looks like:
"homepage": "[myusername].github.io",
"version": "1.0.0",
"description": "Personal website simulating Google Search interface, developed with React",
"keywords": [
"react",
"personal website",
"google",
"portfolio"
],
"main":"index.html",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "1.2.36",
"#fortawesome/free-regular-svg-icons": "5.15.4",
"#fortawesome/free-solid-svg-icons": "5.15.4",
"#fortawesome/react-fontawesome": "0.1.15",
"#material-ui/core": "4.12.3",
"#material-ui/icons": "4.11.2",
"prop-types": "15.7.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.0",
"react-scripts": "^5.0.1",
"react-select": "4.3.1"
},
"devDependencies": {
"#babel/runtime": "7.13.8",
"gh-pages": "^3.2.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"build-localhost": "PUBLIC_URL=/ react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I'm not sure what other info to provide, so I apologize in advance
Also, I didn't want to put my real name so that's why the homepage line looks like that here.
Please help?
I'm not sure if I get what you exactly mean.
But if you want to push your existing project to github here is the steps:
1- create a new repository on github
In Terminal, change the current working directory to your local project
2- then in your terminal write :
git init
Initialize the local directory as a Git repository.
3- git add . OR git add --all
Commit the files that you've staged in your local repository.
4- git commit -m 'First commit'
Commit the files that you've staged in your local repository.
5-git remote add origin <remote repository URL>
Copy remote repository URL field from your GitHub repository, in the right sidebar, copy the remote repository URL.
In Terminal, add the URL for the remote repository where your local repostory will be pushed
6- git remote -v
Sets the new remote.
7- git push origin master
Push the changes in your local repository to GitHub
And if you mean by publish your project is deploying it you can follow these two links:
1- https://github.com/gitname/react-gh-pages
2- https://www.c-sharpcorner.com/article/how-to-deploy-react-application-on-github-pages/
the second one is a bit old but you can check the comments in bottom of the page.
Related
I want to run create react app. I run the command:
npx create-react-app client
but I get this error:
You are running Node 10.9.0.
Create React App requires Node 14 or higher.
Please update your version of Node.
I updated it with latest version and using node -v it is showing version v18.13.0. But after that I'm still getting same error.
How do I solve the problem?
Things to try when this sort of thing happens:
If you haven't already, close the command prompt / terminal window where you're running this and open a new one.
If that doesn't work, completely reboot (mostly a Windows thing).
If that doesn't work, completely uninstall Node.js, reboot (mostly a Windows thing), and then install the latest.
Usually if the first two don't solve the problem, the last will.
You can manually define which Node engine to use for your project in package.json file.
{
"name": "client",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=18"
},
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.2.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"
},
"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 got answer for this from other site which you can use
npm uninstall -g create-react-app
npm install -g create-react-app#3.4.1
create-react-app my-app --scripts-version 3.1.1
I have a deployed active react app through GitHub pages and I'm looking to update it with newer code, i.e. color changes, update text, etc. The code has already been pushed to my GitHub repo, on my main branch but it's not updating the live GitHub page. I'm obviously missing something but couldn't find anything reading documentation or other stackoverflow questions. Can anyone help? Also I've seen a lot of people posting their package.json so here's mine
Edit: I already have the github pages live with prior code, but pushing the newer code to live is what I need help with.
{
"name": "react-portfolio",
"version": "1.0.0",
"private": "true",
"homepage": "N/A",
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"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"
},
"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 think you should to consider to add gh-pages-deploy in your script list.
Because of it will enable you to deploy straight to your github pages with one simple command.
But first, you neet to do npm install gh-pages-deploy -g to install the package globally in your environtment.
Here was the docs for gh-pages-deploy.
Thank you
You can use GH-pages-deploy to deploy your project to GitHub Pages
# install it from npm and symlink it into your PATH
npm install gh-pages-deploy -g
# now run it!
gh-pages-deploy
Or you can do several options to be able to run GH-pages-deploy by looking at the following documentation
I'm having some trouble with react-scripts after creating a new react project.
I created/initialised the project using npx create-react-app dashboard.
After going inside the dashboard folder and running npm start (without doing anything else beforehand), I get the following error:
>npm start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> dashboard#0.1.0 start
> react-scripts start
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
I have checked the package.json file and it does have react-scripts listed (v5.0.1, full package.json below) and checking the node_modules folder shows a react-scripts folder there and react-scripts files (cmd, ps1 and 1 with no extension) inside the .bin folder too.
I've tried clearing the npm cache (npm cache clean -f), installing things again (deleting package-lock.json and node_modules folder then running npm install) and nothing seems to change.
I've also tried running npm start in command prompt, powershell and powershell as an admin. I've also tried restarting my PC and retrying too without any luck.
Specs:
Edition: Windows 10 Pro
Version: 21H2
OS build: 19044.1766
Experience Windows Feature Experience Pack: 120.2212.4180.0
Node JS version: 16.15.1
npm version: 8.11.0
full package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"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-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"
},
"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"
]
}
}
If anyone has any ideas on how to fix this, I'd appreciate the help. Let me know if you need/want any more info that might help debug this issue
As suggested in this comment: https://stackoverflow.com/a/68394617/2371266, running npm config set script-shell powershell seems to have worked. I tried deleting the script-shell config afterwards and retrying and got the original error again so I'm assuming it is defaulting to something else and that's making things freak out a bit. I guess I'll just keep it pointed at powershell for now.
I am just starting to learn next.js. I installed create-next-app tried starting a development server without changing any code provided by boilerplate. I get this error
./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.js
I am just starting with nextjs so I do not have any other information besides this and I have not changed any code
commands I used
npx create-next-app next_js_list
cd next_js_list
npm run dev
This is the package.json I have
{
"name": "next_js_list",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.1.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.1"
}
}
Same for me, looks like an error with the new next.js version 11.1.1, just go back to 11.1.0, and will be ok, a fix will be coming shortly
I have create an app with react.js. I wanted to go into production.
I did
npm run build
serve -s build
I go on localhost:5000
The welcome page works very well, but when i go on localhost:5000/maini have an error
404 | The requested path could not be found
I tried to redo npm run build, but that did not work
What do you propose ?
EDIT
Package.json
{
"name": "name-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.10.0",
"node-sass": "^4.11.0",
"p5": "^0.8.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-p5-wrapper": "0.0.4",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"socket.io-client": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {},
"author": "",
"license": "ISC"
}
It looks like the "-s" or "--single" argument/option on the serve package is either not working or no longer working as expected so requests to paths other than "/" are not being rewritten.
Take a look at the following issue for the serve package: https://github.com/zeit/serve/issues/525
In my test setup downgrading serve as suggested in the bug report fixed the issue.
npm uninstall -g serve
npm install -g serve#10.1.1
serve -s build
got same issue today and finally it was caused by the wrong path in which I ran the cmd "serve -s build". we need to ensure the cmd running in one level up to "build" folder, eg: we have "opt/build" path, then server cmd needs to be done in /opt/