I have some start scripts that look like this:
"nodemonBabel": "nodemon src/index.js --exec babel-node",
"nodemonLint": "nodemon src/index.js --exec 'npm run lint && node'"
I use npm run nodemonBabel in cli to watch my code with nodemon and trigger Babel to transpile it on code change. I also use npm run nodemonLint to watch with nodemon while triggering eslint on code change.
How do I combine both scripts into a single line? I.e, watch my code with nodemon, lint and transpile with Babel from a single script which I don't have to rerun for every change?
What you want to do is run two scripts concurrently, see here: How can I run multiple npm scripts in parallel?
Use a package called concurrently.
npm i concurrently --save-dev
Then setup your npm run dev task as so:
"dev": "concurrently --kill-others \"npm run nodemonBabel\" \"npm run nodemonLint\""
Related
Is that possible to notify app.js file or any other file that I am using a specific script from package.json?
my relevant scripts
"dev":"nodemon app.js",
"start":"node app.js"
In my case i have cron functions that run on background, its a problem when I using nodemon and some of those function invoked I kill them before them ended.
on other way , its more convenient to use nodemon on development, so i want to know if there is a way to notify my app.js if it run from "npm start" or "npm run dev"
What about using arguments ?
"dev":"nodemon app.js dev",
"start":"node app.js production"
process.argv holds a list of all arguments, including dev and production now which can then be used to distinguish the two cases.
I have the following line in my package.json
"scripts": {
"start": "cross-env NODE_ENV=development node index.js"
}
I can see that "yarn start" command is running fine, but when I run
"cross-env NODE_ENV=development node index.js" command directly in the terminal, I am getting the following error:
zsh: command not found: cross-env
If cross-env is not registered in the terminal, how does "yarn start" command works?
https://docs.npmjs.com/cli/v7/configuring-npm/folders#executables
When in local mode, executables are linked into ./node_modules/.bin so that they can be made available to scripts run through npm. (For example, so that a test runner will be in the path when you run npm test.)
It's simply a feature to make things easier. It also means if you're working a project with multiple people, you only have to npm install --save a module--you don't have to worry about everyone in your project manually installing it globally. If you wish to run it yourself on the command line, you can either:
Install the module globally
Manually type in the command line ./node_modules/.bin/cross-env
I have a backend and frontend parts of the project in single root folder:
./app/ - backend files and folders
./app/forntend/ - front end files and folders
in my app folder I have package.json with scripts and backend dependencies, installation script here is: "install": "npm i && cd ./frontend && npm i", I also have package.json in frontend with its own denendencies
when I run installation script it enters into infinite loop of installs, which I have to terminate manually.
Is there way to have a single installation script in package.json?
You can solve this problem by using concurrently npm module.
./app/ - backend files and folders
./app/forntend/ - front end files and folders
With concurrently installed in your root folder i.e. ./app/->backend, you can run multiple custom npm scripts. For example: you can create 2 separate scripts that are installing the dependencies (client-dependencies and server-dependencies) and then create install-all-deps script that will run both scripts one after another and install all deps in both directories.
{
"scripts": {
"server-dependencies": "npm install",
"client-dependencies": "npm install --prefix forntend",
"install-all-deps": "concurrently \"npm run server-dependencies\" \"npm run client-dependencies\""
}
}
Link for Concurrently :- https://www.npmjs.com/package/concurrently
Hope this helps.
If you are installing concurrently part of server app then you will get an error concurrently is not installed. For that we have install concurrently first in following way
"scripts": {
"install-server": "npm install",
"install-client": "npm install --prefix forntend",
"install": "npm install concurrently --save & concurrently \"npm run install-server\" \"npm run install-client\"",
"start": "concurrently \"nodemon node_server/server.js\" \"npm run build\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
where
Use && (double ampersand) for sequential execution.
Use & (single ampersand) for parallel execution.
I have the following npm scripts:
"build:server:dev": "webpack --config ./webpack.server.dev.config.js --watch",
"build:client:dev": "webpack --config ./webpack.client.dev.config.js --watch",
"build:server:prod": "webpack --config ./webpack.server.prod.config.js",
"build:client:prod": "webpack --config ./webpack.client.prod.config.js",
"start:server:prod": "export NODE_ENV=production && node ./dist/server.*.js",
"start:iso:dev": "export NODE_ENV=development && npm run build:client:dev & npm run build:server:dev",
"start:iso:dev:win": "set NODE_ENV=development && concurrently --kill-others \"npm run build:client:dev\" \"npm run build:server:dev\"",
"start:iso:prod": "npm run build:client:prod && npm run build:server:prod && npm run start:server:prod"
The problem I'm facing is that the server compilation depends on the client compilation (I generate an html template where I inject the scripts with webpack on the client, and I use this template for server rendering in the server script).
In nearly all of the cases, the client finishes compiling before the server, but while running these scripts concurrently, there is no way to ensure that this will always be true.
When running webpack watch mode, it is not possible to run these scripts in sequence, as watch mode will block the second script from running.
The most obvious solution in my mind is to compile them without watch mode once, and then attach watch mode on the fly after the initial compilation.
I'm not sure how to achieve this though, and I would not like to compile them twice, just for the sake of attaching watch mode.
The second alternative I have in mind is to fiddle with webpack progress plugin, and somehow compile the server script after the client script has finished.
I dislike this solution, because I don't want to hard couple one script to another.
So is there a way to run client and server compilation sequentially from an npm script while using webpack --watch mode?
Maybe this will help you parallel-webpack although I didn't try it it has watch mode and would probably just require connecting your configs for both server and client side someway along this way:
// some script for running parallel builds
module.exports = [
require('./webpack.server.dev.config.js'),
require('./webpack.client.dev.config.js'),
];
then check running in watch mode
I found a nice solution using the npm package wait-on:
https://github.com/jeffbski/wait-on
The npm script I used (Unix & Windows):
"start:iso:dev": "export NODE_ENV=development && npm run clean:build && npm run build:client:dev & wait-on public/build/index-dev.html && npm run build:server:dev --inspect",
"start:iso:dev:win": "npm run clean:build:win && set NODE_ENV=development&& concurrently \"npm run build:client:dev\" \"wait-on public\\build\\index-dev.html && npm run build:server:dev\"",
This works like a charm.
I was developing my project in nodejs. I found if I need to code and test api, I will run two console, one is to execute typescript watch, another is to execute server.
I think it's so troublesome. I find other developers on github have written scripts in package.json. It's easy to call any commands. It attracts how to write the scripts and simply my development workflow.
In short, the comand of typescript watch is tsc -w and the comand of running server is node app.js. My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do? Thanks.
My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do
You have a few options. Simplest is to use ts-node-dev : https://github.com/whitecolor/ts-node-dev
Option 1
Step 1
install concurrently, use npm, pnpm or yarn
pnpm i concurrently -D
Step 2
create a script with this command
"scripts": {
"run": "tsc && concurrently \"tsc -w\" \"nodemon dist/app.js\"",
}
Option 2
without install anything (mac or Linux)
"scripts": {
"run": "tsc -w & nodemon dist/app.js",
}
run tsc first so that your directory has something at the time of running node
And with that you will have running your Typescript application 🚀
Another option can be to use nodemon:
tsc -w & nodemon app.js
Since Typescript 3.4 the compilation is faster because you can use the incremental compiler option and they keep improving (including interesting changes for large projects in 3.8).
Update:
I also moved to use concurrently as HerberthObregon says in his answer
TLDR, If you like nodemon this is a straight forward way to get file watch, compilation and execution:
nodemon --ext ts --exec 'tsc && node dist/index.js'
Optionally replace tsc with babel for faster compilation.
Here is a more complete example, in package.json (with source maps):
"scripts": {
"develop": "nodemon --ext ts --exec 'yarn build --incremental && yarn serve'",
"build": "tsc",
"serve": "node --require source-map-support/register dist/index.js",
...
},
Install source-map-support as a dependency if you want, ahem... source map support! Otherwise, remove --require source-map-support/register from the serve script above.
tsconfig.json
{
"compilerOptions": {
...
"sourceMap": true,
"outDir": "dist",
}
}
Building on herberthObregon's answer
Step 1: Install packages
npm install concurrently typescript nodemon --save-dev
Step 2: Create these scripts in package.json
"scripts": {
"build": "tsc",
"build:watch": "tsc -w",
"dev": "npm run build && concurrently \"npm run build:watch\" \"npm run serve:watch\"",
"serve": "node dist/index.js",
"serve:watch": "nodemon dist/index.js"
},
build runs a standard typescript build
build:watch runs typescript build in watch mode
serve serves up your node project (assuming your tsconfig outputs to dest/index/js)
serve:watch uses nodemon to restart the node server whenever the js output changes
dev puts them all together
Just going to throw my hat in here, here's a solution using ts-node-dev and concurrently, similar to the one provided by #HerberthObregon but using ts-node-dev instead of nodemon:
"scripts": {
"start": "npm run build && concurrently \"npm run build:watch\" \"npm run dev\"",
"dev": "tsnd --respawn src/main.ts",
"build": "tsc -p tsconfig.release.json",
"build:watch": "tsc -w -p tsconfig.release.json"
}
Bonus: If you need help with your figuring out tscand your tsconfig.json, I use the sensible defaults from this node typescript starter.
Here's a solution that works for me
1. Install ts-node and nodemon as dev dependencies
2. Create a script : "dev" : "nodemon app.ts"