Having trouble updating GitHub pages with React App - javascript

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

Related

Updating Node.js doesn't seem to work, I still get the old version

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

eslint Failed to load config "react-app" to extend from. when making changes in project

I created a react app using yarn create react-app. Then I run yarn start and the project run properly on localhost. However, when I make an edit to a file (add a new tag, rename contents of a div..) the app throws an error and fails to compile with the error
[eslint] Failed to load config "react-app" to extend from.
Eslint is already installed. The crazy thing is, opening the package.json file and saving it solves the issue and the project compiles with the new changes. However I'd have to do this every time I make a change.
I am using Ubuntu on WSL .
Here is my package.json file
{
"name": "gmail-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.1",
"#testing-library/user-event": "^14.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.0"
},
"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"
]
}
}
A few ways to solve the issues:
Add the eslint-config-react-app
yarn add eslint-config-react-app -D OR yarn add eslint-config-react -D
Remove this code from package.json
"extends": [
"react-app"
]
},
Remove yarn.lock and reinstall node modules.
I had a similar problem, and I resolved it by installing eslint-config-react-app:
yarn add eslint-config-react-app -D

npm start fails after creating a new react project using create-react-app

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.

React Js : Failed to Compile

I moved to windows 11 from Linux , so i imported all my code from Linux..to windows .
So whenever i try to run a react project , I get a compile error stating :
Failed to compile
./src/index.js
Module not found: Can't resolve 'react/jsx-dev-runtime' in 'D:\code\react-workspace\react-advanced-2020-master\src'
This error occurred during the build time and cannot be dismissed.
React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components, Had to write something as it was displaying error :)
I tried npm i -g react-scripts and npm clean install
package.json
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"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"
]
}
}

Error when i go into production with react.js

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/

Categories

Resources