We Keep Coding

React does not update changes, must close the server and run yarn start on every changes made

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

React application returning an empty div when deployed on github pages

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.

Deployed React app to github pages is blank

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.

Npm start on offline win10

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"
]
}
}

After deploying on GH pages the app doesn't work

I have such problem, after deploying my React app on GitHub it works only in my PC. When I open link where is my App have to be deployed using my PC or LapTop link - it works, but when I tried to open it with phone or send this link to my friend - there is empty page (with my background). So how to solve this problem?
There is my repository link
Code of my package.json
{
"name": "worktests",
"version": "0.1.0",
"private": true,
"homepage": "https://dmitriykulikovskiy.github.io/MyWeatherForecast",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.0",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"font-awesome": "^4.7.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"shortid": "^2.2.15"
},
"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": "^2.2.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2"
}
}

The problem is this line:
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ in store.jsx
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ is only available if you have Redux Web Tools installed on your browser. Your app didn't run for me locally either. However, once I installed the extension, it ran correctly both locally as well as on your deployed site.
This thread might help find the right way to use composeEnhancers in production. Ideally, in production, you shouldn't be depending on properties populated by the dev tool plugin for debugging but you should be using compose directly from redux.