integrate flow checking into react-slingshot - npm

I have a project based on https://github.com/coryhouse/react-slingshot
I want to integrate flow into the npm start script so that upon running the start script it starts the flow server, by running flow command, and then runs the flow command on every *.js file change.
These are the scripts from package.json:
"prestart": "npm run remove-dist",
"start": "parallelshell \"npm run test:watch\" \"npm run open:src\"",
"open:src": "node tools/srcServer.js",
"open:dist": "node tools/distServer.js",
"lint": "eslint src",
"lint:watch": "watch 'npm run lint' src",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "node_modules/.bin/rimraf ./dist",
"build:html": "node tools/buildHtml.js",
"prebuild": "npm run clean-dist && npm run build:html",
"build": "npm run test && node tools/build.js && npm run open:dist",
"test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel/register --recursive \"./src/**/*.spec.js\"",
"test:watch": "npm run test -- --watch"
I have flow working independently. I can't figure out how to have the flow command run by the file watcher.
How can I do this?

watch 'flow check' src
Usage: watch <command> [...directory] [OPTIONS]
Read the docs here

Related

npm run: Executes another (incorrect) script

This is scripts section of my package.json:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"compile-prebuild": "tsc -p prebuild-tsconfig.json --pretty",
"prebuild": "ts-node --project PreBuild/tsconfig.json PreBuild/prebuild.ts",
"testJs": "node test.js",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"extract-i18n": "ng xi18n Paradise --i18n-format=xlf2 --output-path=i18n --i18n-locale=en && ng run Paradise:xliffmerge"
},
The wonderful thing is when I try npm run build or npm run build -- --prod another script (prebuild) is executed:
> npm run build -- --prod
> project#0.1.1 prebuild ...
> ts-node --project PreBuild/tsconfig.json PreBuild/prebuild.ts
Now, if I rename prebuild script to pre-build (in package.json), everything is going to be alright:
> npm run build -- --prod
> project#0.1.1 build ...
> ng build "--prod"
...
Now, if I reverted to back, the problem appears again!
> npm -v
6.7.0
This is "correct", as it is the documented behaviour of npm - see here.
Additionally, arbitrary scripts can be executed by running npm run-script <stage>. Pre and post commands with matching names will be run for those as well (e.g. premyscript, myscript, postmyscript).
Generally, scripts can be prefixed with pre or post to do things before or after a script.
It is best to consider the prefixes pre and post as reserved when choosing npm script names (unless you intend them to always be run before or after the main task, of course).
The pre and post hooks run automatically by npm. If you have prebuild defined in your package.json, npm will run it automatically when you ask it to run build. Same goes for post hook as well.
You can check out the documentation here. https://docs.npmjs.com/misc/scripts

How are devinstall and devuninstall scripts being used?

I am trying to reuse husky for other projects (not just config file), building a lib of sorts that will be used by all other projects.
I cannot understand how and when devinstall and devuninstall scripts are executed. Cannot find any documentation either on npmjs.com.
Can someone help understand when this are getting executed please?
I've been trying to understand that too.
Turns out they do something at publication time that renames the _install script into install.
Here's the script field of the package.json found in the husky folder when installed through npm.
"scripts": {
"build": "del-cli lib && tsc",
"devinstall": "npm run build && npm run _install -- node_modules/husky && node scripts/dev-fix-path",
"devuninstall": "npm run build && npm run preuninstall -- node_modules/husky",
"fix": "npm run lint -- --fix",
"install": "node husky install",
"lint": "tslint 'src/**/*.ts'",
"postpublish": "pinst --disable",
"postversion": "git push && git push --tags",
"prepublishOnly": "npm run test && npm run build && pinst --enable && pkg-ok",
"preuninstall": "node husky uninstall",
"test": "npm run lint && jest",
"version": "jest -u && git add -A src/installer/__tests__/__snapshots__"
}
Although I can't figure where that is done

A customized npm script to compile, watch and server

I'm trying to set up a project which makes use of express and react. And I'm trying to make the best use of React-Slingshot project to benefit from it as much as possible. But the thing is that my project needs to be served (on the server side) by a script which I wrote. That script will use express and possibly socket.io to server the client side.
I think this is a problem if I use projects like React-Slingshot since they come with their own server scripts which support hot reloading and stuff. I'm willing to give up the fancy functionality like hot reloading. But I need to keep the --watch functionality so each time some file is changed, the code is compiled without me restarting the whole server.
Right now, the script section of package.json looks like this:
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm run start-message",
"start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && babel server -d dist --presets es2015,stage-2",
"test": "jest",
"test:CI": "babel-node tools/testCi.js",
"test:cover": "npm run test -- --coverage ",
"test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "jest --watch",
"open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
This is a modified version of what you can find in React-Slingshot. I've made a change so when I run npm run build, it builds the server code as well and terminates. It used to be like this:
"build": "babel-node tools/build.js && npm run open:dist",
Now, I'm trying to find a way to run my own server (i.e. node temp/server.js) while the rest of the code is compiled based on --watch as for my dev environment.
I believe you need a package like watch also check this video

npm scripts not running in series

I want to run eslint as a prestart script so if it fails it won't run the build script, but even when the eslint returns "clean" result it still stops the following scripts from running.
So as you can see in the example below, the testing is not running.
I've even tried to replace the order and run the test first, but then the lint script doesn't run.
Any ideas?
"scripts": {
"prestart": "npm run lint:watch && npm run test:watch",
"start": "open:src",
"open:src": "nodemon --watch server --exec babel-node --debug=5858 --inspect server/srcServer.js --delay 2",
"lint": "node_modules/.bin/esw webpack.config.* --cache --max-warnings 0 src server",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter progress server/testSetup.js 'src/**/*.test.js'",
"test:watch": "npm run test -- --watch"
},
Now I know how it feels to be dumb :)
The "watch" in the test and lint caused it to stop since it doesn't exit.
Thank me very much for solving my issue.

WebStorm and IntelliJ IDEA don't see custom NPM scripts in NPM run/debug configuration

I cannot see custom NPM scripts in either WebStorm 2016.3.2 or IntelliJ IDEA 2016.3.2's NPM run/debug configuration. I have selected the proper package.json file.
This is the script section from my package.json file and the run/debug configuration on the screen below. I cannot choose other custom commands, such as clean:dist (there is only clean), e2e, pretest, test:passive, etc. How I can choose these?
"scripts": {
"clean": "npm cache clean && rimraf coverage src/main/resources/static/*",
"clean:dist": "rimraf typings src/main/resources/static/*",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"e2e:live": "protractor --elementExplorer",
"lint": "tslint './src/main/frontend/**/*.ts' --force",
"pretest": "rimraf coverage && npm run lint",
"test:passive": "ng test -w false",
"test": "ng test",
"pretest:phantom": "rimraf coverage && npm run lint",
"test:phantom": "ng test -w false --browsers PhantomJS",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": "ng build -dev",
"prebuild:prod": "npm run clean:dist",
"build:prod": "ng build -prod",
"server": "npm run server:dev",
"server:dev": "ng serve --p 4200 -pc proxy.json -dev",
"server:prod": "ng serve --p 4200 -pc proxy.json -prod",
"start": "npm run server:dev",
"ncu": "ncu -a",
"ng:upgrade": "ng init -n sqap-ui -sd src/main/frontend --style scss --prefix sqap --routing",
}
If you like to run your custom scripts, select run as command, and then use the dropdown in scripts field to select your script. test command just runs npm test. Hint: you can create run configurations by right-clicking the script in NPM tool window that can be opened using Show npm scripts in package.json right-click menu