Im running a react-app on localhost and this error popped out. I have installed the correct dependencies with npm install, but for a reason i don't know it doesn't find the command react-scripts.
Nice to meet you.
Please check your node version.
After setup your node.exe.
And set the below contents to your package.json file.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Then please execute the command line.
"npm start"
Best regards.
Related
I have a project from github and it has the recoil function. I'm trying npm install to run npm but it's not working:
Then I tried npm install --legacy-peer-deps, and got
61 vulnerabilities (4 low, 5 moderate, 39 high, 13 critical)
If I write npm start I got
Debugger attached.
> tgp-core-api#0.1.0 start
> PORT=3006 react-scripts start
'PORT' is not recognized as an internal or external command,
operable program or batch file.
Waiting for the debugger to disconnect...
It still says your debugger attached when you run "npm install".
Try to stop debugging (Debug > Stop Debugging or Shift+F5).
well i found out that inside my package.json i had :
"scripts": {
"start": "Port=3006 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
so i deleted Port=3006, with that i got:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
and it worked!
When we develop web app with VS code-server, the default method to preview the result URL is
http://{yoursite}/proxy/3000
However, it does not work with react development.
When we follow the official tutorial to start a react app, all the static resources inside the html template always redirected to the index.html
e.g index.html is returned instead of /static/js/bundle.js
To resolve this problem, in the project root directory, open:
package.json
In script block,change the start property
from:
"start": "react-scripts start"
to
"start" : "PUBLIC_URL='/absproxy/3000' react-scripts start"
:
"scripts": {
"start": "PUBLIC_URL='/absproxy/3000/' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
This is also written in below documentation.
https://coder.com/docs/code-server/latest/guide#stripping-proxyport-from-the-request-path
for those who has an another app running on port 3000, just simply do these little steps:
optional:
export PORT=3001
and then add in package.json
"scripts": {
"start": "PUBLIC_URL='/absproxy/3001/' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
if you are running a Nextjs App you should do provide a basePath:
go to next.confing.js file and just add this line of code:
basePath:"/absproxy/3002"
I want to build React project as per environment like development, staging and production.
below is snapshot of scripts section inside package.json file.
"scripts": {
"start development": "REACT_APP_ENV=development react-scripts start",
"start staging": "REACT_APP_ENV=staging react-scripts start",
"start production": "REACT_APP_ENV=production react-scripts start",
"build development": "REACT_APP_ENV=development react-scripts build",
"build staging": "REACT_APP_ENV=staging react-scripts build",
"build production": "REACT_APP_ENV=production react-scripts build",
"build": "react-scripts build",
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
So as per scripts, 'build development' should build project for development environment.
Now as i run following command in project home directory by specifying environment, ( staging builds for staging env)
npm run 'build staging'
below shown error is displayed and command exits
> testapp#0.1.0 build staging
> REACT_APP_ENV=staging react-scripts build
sh: 1: /tmp/build: not found
Interesting thing is that, the command runs perfectly fine on other systems and creates build folder without any issues but it is throwing error on my current system.
All of my systems are running Ubuntu 20.04.4 LTS
Guys any idea about what might be the issue?
Adding cross-env as dependency and changing scripts to use _ instead of space as shown below resolved the issue
"scripts": {
"start_development": "cross-env REACT_APP_ENV=development react-scripts start",
"start_staging": "cross-env REACT_APP_ENV=staging react-scripts start",
"start_production": "cross-env REACT_APP_ENV=production react-scripts start",
"build_development": "cross-env REACT_APP_ENV=development react-scripts build",
"build_staging": "cross-env REACT_APP_ENV=staging react-scripts build",
"build_production": "cross-env REACT_APP_ENV=production react-scripts build",
"build": "react-scripts build",
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Now the following command runs on all platforms without any issues
npm run build_staging
i cloned a project from github .
when i try to run yarn it successfully install the required packages .
but when i try to run yarn start i get error . please check below screenshot .
i searched alot and i get to know that package.json dont have a start object so i copy paste many ones from internet after looking for solutions but none of them is working .
i will be thankful if u help me to fix my bug .
normally when create new project, at "package.json" there is lines like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
try to add manually
"start": "react-scripts start",
In recent react app I install nodemon globally and modified package.json to add dev command like this:
"scripts": {
"start": "react-scripts start",
"dev": "nodemon ./app.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I start the app like this npm run dev but problem in any changes the development server start again opening new tab. How I make only current tab refreshed ?
Why not simply use npm start?
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. Read more here.