Problem with proxy property in package.json (react) - javascript

I've added the proxy property in package.json that is pointing to http://localhost:8080/ becouse I want to connect my node.js backend with my react frontend. However after setting this, my react app starts on the port 8080 or on whatever port I set in the proxy in package.json. What I'm doing wrong? I would like to start my react app on port 3000 and leave the port 8080 free for the node backend.
Here is my whole package.json file:
{
"name": "restaurants-portfolio-project",
"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",
"axios": "^0.20.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongodb": "^3.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-select": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev:server": "nodemon ./backend/server.js"
},
"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:8080/"
}

Related

command not found: react-scripts (PS: yarn2(berry) workspaces)

Working on a yarn2 powered monorepo with two workspaces common and app. I've declared typescript and react-scripts as devDependencies in root's package.json ; and declared typescript and react-scripts as peerDependencies in app's package.json.
However, running yarn start gives the error
command not found: react-scripts
Any idea how to go about this?
Sidenote
react-scripts has peerDependencies on react which I've provided in root workspace's dependency section.
attaching package.json for root:
{
"name": "monorepo",
"packageManager": "yarn#3.2.1",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.43",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"fictoan-react": "^0.41.22",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"react-scripts": "5.0.1",
"typescript": "^4.7.4"
},
"workspaces": [
"common",
"app"
]
}
package.json for app
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"dependencies": {
"common": "workspace:*"
},
"peerDependencies": {
"#testing-library/jest-dom": "*",
"#testing-library/react": "*",
"#testing-library/user-event": "*",
"#types/jest": "*",
"#types/node": "*",
"#types/react": "*",
"#types/react-dom": "*",
"fictoan-react": "*",
"react": "*",
"react-dom": "*",
"react-scripts": "*",
"styled-components": "*",
"web-vitals": "*"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Not sure if this is a hack, but solved this using https://yarnpkg.com/getting-started/qa#how-to-share-scripts-between-workspaces
added this to root's package.json
"scripts": {
"g:start": "cd $INIT_CWD && react-scripts start",
"g:build": "cd $INIT_CWD && react-scripts build",
"g:test": "cd $INIT_CWD && react-scripts test",
"g:eject": "cd $INIT_CWD && react-scripts eject"
}
updated this in app's package.json
"scripts": {
"start": "yarn g:start",
"build": "yarn g:build",
"test": "yarn g:test",
"eject": "yarn g:eject"
}
PS:not really sure why react-scripts isn't available in app workspace even though its specified as a peerDependency :/

Cannot make a request using proxy in my react app

im trying to use a proxy in my package.json fille like this
{
"name": "type-redux-toolkit",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"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"
]
},
"proxy": "http://localhost:8800/api/v1" //proxy is here
}
and then making a post request using axios like this
const res = await axios.post("/auth/login", credentials);
console.log(res);
now if i just put the full url in the request it works but i want to use the proxy.
i deleted the package-lock.json file and node_modules folder and restared the app like some people say but nothing

I am getting a 404 error page after deploying my react app on Github (help please)

So I followed the steps on installing gh-pages and deploying my project onto github. However, my github page is giving me a 404 error and gave me this message:
"If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file".
I have been googling around and nothing comes up.
I even switch the branch to gh-pages, but the page comes out blank.
Here is my package.json file:
{
"name": "dessert-menu",
"version": "0.1.0",
"homepage": "https://aaronv-github.github.io/DessertMenu/",
"private": true,
"dependencies": {
"-": "^0.0.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.1",
"save": "^2.5.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -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"
]
},
"devDependencies": {
"gh-pages": "^4.0.0",
"react-router-dom": "^6.3.0"
}
}

npm start not working | Not Loading React Application

npm start command not progressing after below point -
Application is not getting loaded due to this.
Below is package.json -
{
"name": "reacttest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"redux": "^4.1.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "set HTTPS=true&&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"
]
}
}
Windows (cmd.exe)
set HTTPS=true&&npm start
Windows (Powershell)
($env:HTTPS = "true") -and (npm start)
Linux, macOS (Bash)
HTTPS=true npm start
add variable in .env
REACT_APP_HTTPS = true
and in script
"scripts": {
"start": "react-scripts start",
....
}
then run npm start and see.

Change of window focus when developping with react

I have a setup using react. When i run yarn start, i can start coding and changes are visible in my browser. Problem is, every 10 secons or so my terminal wants to let me know about error in mycode and always change my focus back to my editor within the specific file where the error would be. it is so annoying and frustrating. I guess it has something to do with eslint. I tried looking at the doc and even erased the eslinrc.json file but still persist with the same behavior. Is there any way to stop that behavior.
here is my package.json
{
"name": "korean-recipes",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.5",
"#material-ui/icons": "^4.9.1",
"#reduxjs/toolkit": "^1.2.5",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5"
},
"scripts": {
"lint": "yarn run start",
"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"
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-react": "^7.19.0"
}
}
I found the problem. It is a behavior create by 'npx create-react-app' by default.
To remove the behavior, simply add a .env file with the following variable:
REACT_EDITOR=none
Source: https://create-react-app.dev/docs/advanced-configuration

Categories