Unable to start react app using npm start - reactjs

I have downloaded a source code and am unable to use npm start to start the react app.
when I use npmstart I get the following errors.
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/afrasiab./.npm/_logs/2023-01-13T04_36_09_195Z-debug-0.log
following is package.json
{
"name": "react-devtools",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"react": "16.8.6",
"react-dom": "16.8.6",
"react-scripts": "3.2.0"
},
"devDependencies": {
"typescript": "3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Unable to use npm start command on my react app.

Correct command for starting a react application is as :
npm run start

I think you don't install all dependencies. Agree with #Dipten
Use
npm install

I also had issue while using react first time. i have solved this issue with these lines.
npm rm -g create-react-app
npm install -g create-react-app
npx create-react-app my-app
you can add scripts in the package.json
,"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
This error also happens if you didn't open your project from the root of the project. Make sure to cd into the folder before opening it inside VS code.

Seems like you aren't running npm start in the root directory. So first cd to the root directory and run npm start.
Also, please consider attaching a screenshot of your folder structure because it will be easy for others to help you

Related

npm ERR code ENOSELF when installing angular-notification-icons

I am trying to use this link as a reference to build a Notification system:
https://github.com/jacob-meacham/angular-notification-icons
First step is Running:
npm install angular-notification-icons --save
I am not sure what path I need to run this? I try to run it in my project path but I am getting this error:
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "angular-notification-icons" under a package
npm ERR! also called "angular-notification-icons". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
Problem cause when name of project in package.json is similar with the name of npm module.
To solve please change project name in package.json to other.
example "angular-notification-icons-test"
{
"name": "angular-notification-icons-test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
...
}

Deploy react application in Git pages using Azure DevOps

I'm trying to deploy my react application (Just a very basic app) in git pages using Azure DevOps. This is to get my hands wet with Azure Devops.
First of all I configured my packag.json as below.
{
"name": "gitpages",
"version": "0.1.0",
"homepage": "https://senal.github.io/gitpage-react",
"private": true,
"dependencies": {
"gh-pages": "^2.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"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"
]
}
}
Please pay attention to "homepage" and "deploy" script.
In my Azure DevOps, I have modify the yml file as below.
# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
git config --global user.email "xxxx.yyyy#mymail.com"
git config --global user.name "RSF"
npm install
npm run build
npm run deploy
displayName: 'npm install and build then deploy'
However, when I run the build in DevOps I get the following error:
fatal: could not read Username for 'https://github.com': terminal prompts disabled
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gitpages#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gitpages#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/vsts/.npm/_logs/2019-06-13T12_03_34_094Z-debug.log
##[error]Bash exited with code '1'.
Please advice what't with my steps/scripts.
Feel free to contact me should you require more info.
UPDATE: I was able to create the page by running
npm run deploy
from my terminal.
What I would like to know is, why we can't do the same thing in DevOps?
Cheers,
RSF
I had the same issue and fixed it by supplying the Github token in the --repo option. Replace npm run deploy with,
npx gh-pages --repo https://$(GITHUB_TOKEN)#github.com/org/repo.git -d dist
and add your token as a pipeline secret.

React: missing script: start

how to run npm start
Bhanukas-MacBook-Pro:Shopping Card Admin Panel bhanukaisuru$ npm start
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/bhanukaisuru/.npm/_logs/2019-05-01T05_42_52_916Z-debug.log
package.json file
{
"name": "shopping-cart-admin-panel",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0"
},
"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"
]
},
"proxy": "http://localhost:3000"
}
I can see you do have "start" script in your package.json
"scripts": {
"start": "react-scripts start", <--- here
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
react-scripts is a set of scripts from the create-react-app starter pack.
You need to run npm start command in your terminal in order to run the app.
In common apps, the start script looks like so:
"start": "npx node index.js"
Where index.js can be also the server.js file
it is because of global installation of create-react-app or your node.js is not updated.follow the below steps
uninstall react from global
----> npm uninstall -g create-react-app
Then try to update the npm and all the packages.
----> npm install -g npm#latest
Now create your new react app
----> npx create-react-app yout-app-name
I had this same problem at an early stage. Getting the error:
npm ERR! missing script: start
For starters, make sure that you are in the "client" (cd client) or whichever name that you chose to build your creat-react-app 's client side.
It seems as if you already have your start and react-scripts, so hope this helps.
I had the same issue and spent a whole day trying to fix it, only to realize that the root folder in which I created the react app had a "&" sign in it. npm has looked up the start script on an invalid folder path by omitting the characters before and including the &. Once I moved the project to a no-nonsense folder path, everything worked flawlessly. Hope this helps out a Node/React newbie like me.
Suggestions -->
-sometimes , if you install yarn specifically using $ npm install -g yarn., this blocks all sort of scripts and react dom to install and it creates yarn.lock file which blocks it creating the scripts .
So uninstall yarn using
$ npm uninstall -g yarn
and then delete all specific folders that were created previously on the project.
And run
$npx create-react-app my-app
Happy Hacking!
ERR: Script missing
For a solution follow these steps in PowerShell
uninstall react from global
 npm uninstall -g create-react-app
Then try to update the npm and all the packages.
npm install -g npm#latest
Now create your new react app
npx create-react-app yout-app-name
consider you checked any app from git
open your package.json
under the scripts section, you will have the field called start
for the create react app,this will be like "start": "npx node index.js
But for your app, you may have customized scripts something like
"start:env": "some env configs"
just try to run cmd in your terminal npm run start:env
Dear Guys in most of our cases everything is Ok!
The most common that we do in fact, is that we start the same path in our code editor that we have already choosen for already existing folders. So while working with react make sure that you have open the right folder with right path in you code editor and then simply!
----npm start"--
It would almost in all cases if you take this little caution, Otherwise all your codes will be useless if apply this on wrong path or folder.

How to setup new reactjs project on local environment or system?

I started to learn reactjs for front end in web development. For learning purpose I install node and npm on my local system below are the versions of node and npm
node v8.11.3
npm v5.6.0
and I have run bellow command
npm init
and create pakage.json following file using command
{
"name": "loginpage",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-scripts": "0.9.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"main": "index.js",
"author": "rizwan",
"license": "ISC",
"description": ""
}
in next step i run following command install node and react dependencies
npm install
and then I run create-react-app hello-world commands but I did't find any change in my current local project folder exception pakage.json file I don't know that where I am doing mistake. Guide in right direction.
Create-react-app creates everything from scratch, you don't need to create a folder or npm init, anything like that.
Just run create-react-app my-project and you'll have everything you need in the my-project folder.
To create react app
first, install create-react-app globally
then, run these commands
create-react-app app-name
cd app-name
npm run start
I prefer to use Yarn instead of npm

React app deploy failure on github

Can Anyone help me out that how can i deploy my react app on github. I have added all required dependecny in my package.json file with using of updated react modules.
Below is my package.json file :
{
"name": "git-sample-react",
"version": "0.1.0",
"private": true,
"homepage": "https://ababsheck.github.io/first-react-sample/",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"deploy": "gh-pages -b master -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"gh-pages": "^1.2.0"
}
}
npm run deploy issue : github
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! git-sample-react#0.1.0 deploy: `gh-pages -b master -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the git-sample-react#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\abhis\AppData\Roaming\npm-cache\_logs\2018-08-07T12_21_21_735Z-debug.log
I had the same issue, deploying react app in GitHub and resolved this issues with the following steeps:
Run the command in project folder git remote add origin <url>, with the URL of your repository on GitHub.
Run the command npm install --save-dev gh-pages.
Run the npm run build.
Run the command npm run deploy.
Change the branch in GitHub where you deploy see the image below. Under Source must be gh-pages branch.
I also have added the "homepage": "https://ababsheck.github.io/first-react-sample/",
before the script like:
"homepage": "https://ababsheck.github.io/first-react-sample/",
"scripts": {
"predeploy": "npm run build",
...// the rest of the code
Best approach
git init
git remote add origin <repo_link>
yarn add gh-pages
yarn build
yarn deploy
Now go to your Github and update the
Settings-->Github Pages-->source (change to gh-pages branch)-->root-->Save
and then check the link/homepage generated.

Resources