How to define scripts for npm command? - node.js

I am using npm+webpack to manage a react web application. And I want to define a few command for npm in order to run some webpack command. Below is the two command scripts I defined in package.json file.
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0",
"build": "NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors"
},
As you can see, there are two commands 'start' and 'build'. When I run npm start it will run webpack-dev-server --host 0.0.0.0 to launch a web server.
But when I run npm build, it doesn't run the configured command and simply returns without any output. I wander how to define a script command for npm to use. Below is my whole package.json file:
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0",
"build": "NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"compression-webpack-plugin": "^0.3.1",
"css-loader": "^0.23.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"npm-install-webpack-plugin": "^3.1.3",
"style-loader": "^0.13.1",
"svg-sprite-loader": "0.0.26",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-shell-plugin": "^0.4.2"
},
"dependencies": {
"actions": "^1.3.0",
"axios": "^0.12.0",
"babel-preset-stage-2": "^6.11.0",
"cdnjs": "^0.3.2",
"components": "^0.1.0",
"containers": "0.0.1",
"extract-text-webpack-plugin": "^1.0.1",
"features": "^0.1.0",
"file-loader": "^0.8.5",
"fo": "^0.1.1",
"jshint": "^2.9.2",
"jshint-loader": "^0.8.3",
"leaflet": "^0.7.7",
"material-ui": "^0.15.2",
"moment": "^2.13.0",
"normalize.css": "^3.0.2",
"nuka-carousel": "^2.0.0",
"public": "^0.1.2",
"query-string": "^4.2.2",
"react": "^15.1.0",
"react-addons-css-transition-group": "^15.1.0",
"react-addons-shallow-compare": "^15.1.0",
"react-alert": "^1.0.14",
"react-button": "^1.2.1",
"react-cookie": "^0.4.7",
"react-date-picker": "^5.3.9",
"react-datepicker": "^0.27.0",
"react-dom": "^15.0.2",
"react-infinite-calendar": "^1.1.14",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.5",
"react-select": "^1.0.0-beta13",
"react-spinkit": "^1.1.8",
"react-tap-event-plugin": "^1.0.0",
"react-tappable": "^0.8.1",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"sha1": "^1.1.1",
"source-map-loader": "^0.1.5",
"src": "^1.1.2",
"style": "0.0.3",
"url-loader": "^0.5.7",
"utils": "^0.3.1"
}
}

You can use npm run-script <script-name> to run arbitrary scripts. In your case, npm run-script build.
From the npm documentation, The npm <script-name> syntax is only supported for a specific number of predetermined scripts such as start.
npm supports the "scripts" property of the package.json script, for
the following scripts:
prepublish: Run BEFORE the package is published. (Also run on local npm install without any arguments.)
publish, postpublish: Run AFTER the package is published.
preinstall: Run BEFORE the package is installed
install, postinstall: Run AFTER the package is installed.
preuninstall, uninstall: Run BEFORE the package is uninstalled.
postuninstall: Run AFTER the package is uninstalled.
preversion, version: Run BEFORE bump the package version.
postversion: Run AFTER bump the package version.
pretest, test, posttest: Run by the npm test command.
prestop, stop, poststop: Run by the npm stop command.
prestart, start, poststart: Run by the npm start command.
prerestart, restart, postrestart: Run by the npm restart command. Note: npm restart will run the stop and start scripts if no restart script is provided.
Additionally, arbitrary scripts can be executed by running npm run-script <pkg> <stage>. Pre and post commands with matching names
will be run for those as well (e.g. premyscript, myscript,
postmyscript).
As well, you can use npm run <script-name> as a shorthand.

You can define an npm script just like how you have it here:
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0",
"build": "NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors"
},
To run the build command enter:
$ npm run build

you need to use command npm run build

Related

'npm install' does not work on a nodejs project in a plesk

I'm trying to deploy my nodejs project on my plesk server but something went wrong.
Even if everything works fine on localhost, I can not install npm on the plesk and I don't know why.
Here is my package.json :
{
"name": "node-mysql-boilerplate",
"version": "1.0.7",
"description": "node-mysql-boilerplate",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"dependencies": {
"#cosmjs/encoding": "^0.28.11",
"#elrondnetwork/elrond-core-js": "^2.1.0",
"#elrondnetwork/erdjs": "^10.2.5",
"#elrondnetwork/erdjs-network-providers": "^0.1.5",
"#elrondnetwork/erdjs-walletcore": "^1.0.0",
"ajv": "^5.5.2",
"artillery": "^2.0.0-16",
"axios": "^0.27.2",
"bcrypt": "^3.0.8",
"bcryptjs": "*",
"bech32-converting": "^1.0.9",
"body-parser": "*",
"cors": "*",
"express": "^4.18.1",
"flatted": "^3.2.6",
"fs": "^0.0.1-security",
"ipfs-api": "^26.1.2",
"ipfs-http-client": "^57.0.3",
"jsonwebtoken": "^8.5.1",
"mysql": "^2.18.1",
"node-schedule": "^1.3.0",
"nodemailer": "^6.7.5",
"nodemon": "^1.19.4",
"pm2": "^2.10.4",
"react": "^18.1.0",
"to-hex": "^0.0.18"
},
"author": "",
"license": "ISC"
}
Here is the error message on npm install process :
npm ERR! code 127
npm ERR! path /var/www/vhosts/apcom.app/elrond-api.apcom.app/node_modules/peer-id/node_modules/ursa-optional
npm ERR! command failed
npm ERR! command sh -c node rebuild.js
npm ERR! sh: 1: node: Permission denied
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-07-28T14_46_54_171Z-debug.log
My node version and npm version in the plesk
node -v # v16.13.0
npm -v # 8.1.0
Here is the link to the boilerplate I use for this nodejs project :
https://github.com/yug95/node-mysql
I have tried this, but nothing changes :
npm config set user 0
npm config set unsafe-perm true
and
rm -rf node_modules # Delete node_modules folder
npm install # Retry to install

NPM Installation Failed With Laravel 8

I want to run npm run dev command on my Laravel 8 project, but I get this error:
[webpack-cli] Error: Unknown option '--hide-modules'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpa
ck.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # development 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\User 1\AppData\Roaming\npm-cache\_logs\2021-07-03T05_59_56_150Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # dev 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\User 1\AppData\Roaming\npm-cache\_logs\2021-07-03T05_59_56_264Z-debug.log
My package.json goes like this:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"axios": "^0.21.1",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"laravel-mix": "^4.1.4",
"lodash": "^4.17.20",
"node-sass": "^4.14.1",
"popper.js": "^1.16.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.29.0",
"sass-loader": "^7.3.1",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2",
"webpack-cli": "^4.7.2"
},
"dependencies": {
"#fancyapps/fancybox": "^3.5.7",
"#wiris/mathtype-tinymce5": "^7.24.1",
"bootstrap-fileinput": "^5.1.3",
"chosen-js": "^1.8.7",
"copy-to-clipboard": "^3.3.1",
"counterup2": "^1.0.4",
"croppie": "^2.6.5",
"font-awesome": "^4.7.0",
"highcharts": "^8.2.0",
"jquery-clock-timepicker": "^2.3.2",
"num2persian": "^3.2.2",
"production": "0.0.2",
"select2": "^4.0.13",
"simplebar": "^5.3.0",
"slick-carousel": "^1.8.1",
"sweetalert2": "^8.19.0",
"tinymce": "^5.5.1",
"tooltipster": "^4.2.8"
}
}
I tried deleting node_modules folder and again run the command npm install and npm run dev but didn't solve the issues.
At the very least, the latest version of Laravel 8 has a change to the scripts section in package.json to utilize the updated version of Laravel Mix.
Try this in your package.json.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#fancyapps/fancybox": "^3.5.7",
"#fortawesome/fontawesome-free": "^5.15.3",
"#wiris/mathtype-tinymce5": "^7.26.1",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"bootstrap-fileinput": "^5.2.2",
"chosen-js": "^1.8.7",
"copy-to-clipboard": "^3.3.1",
"counterup2": "^1.0.4",
"croppie": "^2.6.5",
"highcharts": "^9.1.2",
"jquery": "^3.6.0",
"jquery-clock-timepicker": "^2.4.0",
"laravel-mix": "^6.0.25",
"lodash": "^4.17.21",
"node-sass": "^6.0.1",
"num2persian": "^3.2.2",
"popper.js": "^1.16.1",
"postcss-import": "^14.0.2",
"production": "0.0.2",
"resolve-url-loader": "^4.0.0",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"select2": "^4.0.13",
"simplebar": "^5.3.4",
"slick-carousel": "^1.8.1",
"sweetalert2": "^11.0.18",
"tailwindcss": "^2.2.4",
"tinymce": "^5.8.2",
"tooltipster": "^4.2.8",
"vue": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.42.0",
"webpack-cli": "^4.7.2"
}
}
Frist new install npm.
npm install
Please run the command.
npm i vue-loader
Now this command run.
npm run dev

Fresh Laravel Homestead 8.0.1: npm run dev fails to compile and npm ci fails to install. Something with cross-env?

I recently upgraded my Homestead from 6.3 to fresh Laravel Homestead 8.1.
I ssh'ed into the VM as usual to compile assets in my Laravel project via npm run dev and it started failing.
I was getting issue that Node Sass does not yet support your current environment (similar to this) but running:
sudo npm rebuild node-sass and npm uninstall --save node-sass and npm install --save node-sass didn't help.
When I completely remove node_modules via rm -rf node_modules or do npm ci it install stuff and fails at the end with:
No idea how to fix this. My node and npm versions are below:
node -v gives v12.7.0
npm -v gives 6.10.2
package.json is:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"test": "cross-env NODE_ENV=test jest",
"tdd": "npm run test -- --watch --notify"
},
"devDependencies": {
"#coreui/coreui": "^2.0.4",
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.2.0",
"#fortawesome/free-regular-svg-icons": "^5.2.0",
"#fortawesome/free-solid-svg-icons": "^5.2.0",
"#vue/test-utils": "^1.0.0-beta.10",
"axios": "^0.18",
"babel-jest": "^22.1.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jest": "^22.1.4",
"jest-vue-preprocessor": "^1.3.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"pace": "github:HubSpot/pace#v1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.12.4",
"sweetalert2": "^7.0.7",
"vue": "^2.5.7"
},
"jest": {
"testURL": "http://localhost",
"roots": [
"<rootDir>/tests/Javascript/"
],
"moduleNameMapper": {
"^vue$": "vue/dist/vue.common.js"
},
"moduleFileExtensions": [
"js",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
}
},
"dependencies": {
"bootstrap-datepicker": "^1.8.0",
"clipboard": "^2.0.4",
"datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"datatables.net-scroller": "^2.0.0",
"debounce": "^1.2.0",
"jquery-datatables-checkboxes": "^1.2.11",
"owl.carousel": "^2.3.4",
"select2": "^4.0.6-rc.1"
}
}
Can somebody give me any hint? I'm happy to provide additional output from any logs if needed. I'm blocked by this one.
Full reset did the job:
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install
then
npm run dev
I committed new package-lock.json into the repository. Can somebody at least explain what was the culprit?

Unable to install node in Heroku

I am trying to deploy a Django Application on Heroku with the node and npm installations, however, while deploying the application I get the following error on the Heroku console:
npm ERR! node v11.13.0
npm ERR! npm v2.15.12
npm ERR! path /tmp/build_number/node_modules/.bin/grunt
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall unlink
npm ERR! enoent ENOENT: no such file or directory, unlink '/tmp/build_number/node_modules/.bin/grunt'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_number/npm-debug.log
-----> Build failed
I am trying to build charts using Vue.js components that uses buildpacks. I would like to know how to install the npm on Heroku. Any help will be greatly appreciated.
I have the following configuration for the website:
Django version: 2.1.7
Node Version: 11.3.0
Python Version: 3.7.3
My package.json file looks as follows:
{
"name": "django",
"private": true,
"scripts": {
"start": "node app",
"poststart": "npm prune --production",
"pretest": "eslint django/ js_tests/admin/ js_tests/gis/",
"test": "grunt test --verbose"
},
"engines": {
"node": "11.13.0",
"npm": ">=1.3.0 <3.0.0",
"build": "bower install && grunt build",
"start": "nf start"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/runtime": "^7.4.3",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bootstrap-sass": "^3.4.1",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-qunit": "^1.2.0",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-hot-reload-api": "^2.3.3",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-bundle-tracker": "^0.4.2-beta",
"webpack-cli": "^3.3.0"
},
"description": "FitGirl Inc",
"version": "1.0.0",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/uno-isqa-8950/fitgirl-inc.git"
},
"author": "hghanta",
"license": "ISC",
"bugs": {
"url": "https://github.com/uno-isqa-8950/fitgirl-inc/issues"
},
"homepage": "https://github.com/uno-isqa-8950/fitgirl-inc#readme",
"dependencies": {
"chart.js": "^2.8.0",
"vue-chartjs": "^3.4.2",
"vue-cli": "^2.9.6"
},
"keywords": [
"djano"
]
}
My ProcFile is as follows:
web: node node_modules/gulp/bin/gulp build, gunicorn empoweru.wsgi:application --log-file -
'''
Heroku by default has it's Node modules cache enabled. So when you try to make changes to your package.json Heroku does not recognize your changes to the devDependencies. Follow these two steps and you should be able to deploy it:
Remove grunt-cli from your devDependencies
Run this command to disable cache
heroku config:set NODE_MODULES_CACHE=false
Deploy your code

package.json add "npm install -g" to scripts preinstall

When writing package.json:
"scripts": {
"preinstall": "npm install -g grunt-cli"
},
"devDependencies": {
"async": "^0.9.0",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "^0.6.1",
"jit-grunt": "^0.9.0",
"marked": "^0.3.2",
"time-grunt": "^1.0.0",
"underscore": "^1.7.0"
}
And then running the command npm install
It works on some computers but on some I get this error:
http://pastebin.com/rYUwhV5k
Is it proper use of the package.json?
Is there any other way to do it?
How can I fix the problem that occurs on the other computers?
According to the npm documentation "NOTE: INSTALL SCRIPTS ARE AN ANTIPATTERN"
https://docs.npmjs.com/misc/scripts
In your case, probably best to just add in the readme.md that you need to have grunt installed to run the tests (and let the user decides how to install it)

Resources