We Keep Coding

While i am trying to open my react app the CMD showing an npm err! Saying 'npm err! missing script:start' can anyone help me?

enter image description here
I've searched in previous answers and tried to solve this for many hours but with no success. I've typed in the terminal npm create-react-app, moved to the correct cd, and it gives me this error:
'npm ERR! missing script: start'

You should ensure that you have package.json in your project and it has the command start registered in it, example
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

Start by validating that the 'start' script exists inside the package.json. That's where the script gets invoked. It should be under the key "scripts". If it's not there then that's the problem.
Should look something like this (if using react-scripts dependency):
"scripts": {
"start": "react-scripts start",
....
}
And if you're missing dependencies then run the following command inside the project directory to install them:
npm install

'npm start' command doesn't do anything [duplicate]

This question already has answers here:
NPM run * doesn't do anything
(2 answers)
Closed 3 years ago.
I'm trying to start a react js project but the npm start command doesn't do anything. No error messages. No exceptions. Just nothing.
I already have a start script in the package.json file.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I've also checked for missing dependencies but nothing is missing.
Is there something I'm missing here?

SOLUTION:
My npm ignore-scripts was set to true. So I set it to false and the npm start command works.
npm config set ignore-scripts false
To check if your ignore-scripts is true or false:
npm config get ignore-scripts
Thanks #RobC for the answer
NPM run * doesn't do anything

try putting npm run for scripts, just like
npm run start

I think it's just a bug. Try to run the command again to see if it works now. Or if the problem persist create another app and follow the instructions. Don't forget to checkout to the project directory as instructed: cd your_project_name. And another things: how did you create the app?

How to set NODE_ENV from package.json for react

I am trying to target multiple environments from local while executing React app.
1. Development
2. Staging
3. Production
I am also trying to test for offline mode in any of the environments. So, the scripts what I have configured is as follows:
"staging-server": "nodemon server.js --environment=staging",
"staging": "concurrently -k \"npm:staging-server\" \"NODE_ENV='staging' PORT=3003 react-scripts start\"",
"prod": "npm run build && forever server.js --environment=production"
I am able to fetch environment arg using args inside my Express, but my local ui app is still showing development only when I console for process.env.NODE_ENV. I am also trying to set NODE_ENV with same line for staging, but still no luck. PORT setting is working but, the app is running in 3000 and 3003 both ports.
How to get rid of this? I would like to understand the staging configuration as well.

As per the docs, we cannot override NODE_ENV, but there is a room to create our own custom variables starting with REACT_APP_. So i configured to look as below:
Reference: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
"staging": "concurrently -k \"npm:staging-server\" \"cross-env REACT_APP_ENVIRONMENT='staging' PORT=3003 react-scripts start\"",
And inside my UI application, I can fetch its value by consoling it like this:
console.log('REACT_APP_ENVIRONMENT => ', process.env.REACT_APP_ENVIRONMENT);

I build the build with REACT_APP_STAGE and use it in my application as process.env.REACT_APP_STAGE.
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "REACT_APP_STAGE=local npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"build-dev": "REACT_APP_STAGE=dev react-scripts build",
"build-prod": "REACT_APP_STAGE=prod react-scripts build",
"build-qa": "REACT_APP_STAGE=qa react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},

Use cross-env in front of NODE_ENV.
npm i -g cross-env
"staging": "concurrently -k \"npm:staging-server\" \"cross-env NODE_ENV='staging' PORT=3003 react-scripts start\"",

Easiest approach is to add it directly in your command:
"scripts": {
"start": "./node_modules/.bin/nodemon server.js",
"start:prod": "NODE_ENV=prod node server.js",
},

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......

After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.

You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

create-react-app: How do I "npm start" with a specific browser?

npm start
starts the react server on the default browser, which is Firefox for me. I like Firefox for browsing but prefer Chrome in web development for its developer tools. Is there a way to force "npm start" to start the server with Chrome, without changing my default browser to chrome? I am using Bash on Windows.
Edit: I used "create-react-app" to create my server and this adds a script to "packages.json" file for "npm start". The script starts the localhost server with the default browser. How do I modify the script added by "create-react-app" such that it starts with a different browser?

This is possible with the BROWSER environment variable.
You can also do it directly in the terminal:
BROWSER=chrome npm start
This is described in the Advanced Configuration docs:
By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension.
Also note that the browser names are different on different platforms:
The app name is platform dependent. Don't hard code it in reusable modules. For example, Chrome is google chrome on macOS, google-chrome on Linux and chrome on Windows.

As you have mentioned that you are using create-react-app for creating react app and you want chrome to open on hitting npm start. Set BROWSER variable in package.json present in your project in the following manner:
Replace:
"start": "react-scripts start"
With:
Linux:
"start": "BROWSER='google-chrome-stable' react-scripts start"
Windows:
"start": "BROWSER='chrome' react-scripts start"
OS X:
"start": "BROWSER='google chrome' react-scripts start"

Method by using .env file in the root of your NodeJS app.
BROWSER="firefox developer edition"

Using above technique, you may end up with error
'BROWSER' is not recognized as an internal or external command, operable program or batch file.
To over come this
Do an npm install of cross-env in your cloned repo:
npm install --save cross-env
Try to use this command in the package.json file
"start": "cross-env BROWSER=chrome react-scripts start"
BROWSER is an environment variable, and you can use the cross-env package to properly handle it.

I don't like to repeatedly create a new .env file or prepend npm start every time with an additional command. You can specify your browser of choice instead of none in your shell config file. Type in your terminal the following commands:
echo export BROWSER=none >> ~/.bashrc
source ~/.bashrc
At this point you can run npm start and be happy.

Simply add the env-cmd package as global
then create a .env file and write a variable with a specific Browsers path
after that add the env-cmd just in your start script
in the terminal
npm install -g env-cmd
in the .env file
BROWSER= "your browser path"
like => BROWSER= "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft Edge"
in the package.json add the env-cmd
"scripts": {
"start": "env-cmd react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
that should work!

In Windows cmd, set env variable for desired browswer:
set BROWSER=chrome
Then just run npm start like normal

Change your default Browser setting in windows, if it does not work then open your visual studio code and change the script browser to:
"start": "BROWSER=chrome react-scripts start"

for Brave browser it is BROWSER=brave-browser npm start

If you want to change the default browser when you are running a npm start or yarn start, the simplest way to do that is edit your package.json file.
Many are not comfortable dealing with environment variables using the terminal.
This is what your scripts section should look like:
"scripts": {
"start": "BROWSER=none react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
In the above scenario it would not open any browser at all, you are free to choose your development browser and continue your work(I prefer this one). However, if you want a specific browser then you can replace BROWSER=none with any of the following:
BROWSER=firefox
BROWSER=google-chrome-stable
BROWSER=vivaldi
Suit yourself.

This is how I solved mine:
I opened the application on vsCode, then via the terminal I ran "BROWSER=Chrome npm start".

on windows, the easies way with create-react-app was to add BROWSER="C:\Program Files\Google\Chrome Dev\Application\chrome.exe"
to my .env.developmennt.local file in each CRA project. I use a different browser without dev extensions as the default one set in the system.

There is one package called set-default-browser https://www.npmjs.com/package/set-default-browser
just download package from there and add following code
var setDefaultBrowser = require('set-default-browser');
setDefaultBrowser("chrome");
Or you can just run this set-default-browser chrome
Thanks!

On Mac, this method:
"start": "BROWSER='firefox developer edition' react-scripts start"
works on 'react': '17.0.1' together with 'react-scripts': '4.0.1'
But it is not working on 'react': '18.0.1' together with 'react-scripts': '5.0.1'.
On 18.0.1 it continues to open in the default browser set on my computer. So I have sometimes reverted back to using the older React version but do not want to continue doing this as I do need the newer version in some cases and it's just easier to install the most recent version using create-react-app.
Any suggestions?

If you are using another browser like Brave, here is an example on how to modify the package.json file.
In Mac OS
"scripts": {
"start": "BROWSER='/Applications/Brave Browser.app' react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

To open in chrome we need to set it as a default browser.
Setting --> Default browser --> Make default -->
and choose chrome if any other browser is chosen.
It worked on windows 10.

Add script to your package.json file
"devserver": "live-server --browser=Chrome"

If you are a Windows user then go to Sitting -> Default apps -> Web browser then select your desired browser.If you are a Linux user then go to System-settings -> Details. (Note: In older versions of Ubuntu Details is called System Info)