Currently I have this script in my package.json file:
"npm run build:main:dev && concurrently -k -n Main,Rend -c yellow,cyan \"electron --inspect=5858 --ignore-certificate-errors ./build --watch\" \"npm run build:renderer:watch\""
I would like to add something to it, so that it will completely finish running npm run build:main:dev before it goes on to run the rest of the script. How can I do that?
Related
I have three scripts in package.json:
Watch server TypeScript
Nodemon
Webpack
"scripts": {
"watch-server": "tsc --watch --project ./server/tsconfig.json",
"watch-node": "nodemon --watch ./server/build/ --watch ./server/templates -e js,json,pug",
"watch-client": "webpack --config ./webpack/webpack.dev.conf.js --watch"
}
Everytime I start my computer and open VS Code I need to open three separate PowerShell terminals and type in those commands one-by-one. Is there any way to launch these three separate terminals with their own commands in one shell command? Maybe via tasks.json?
On linux or any bash terminal, you can use && to combine multiple commands, i
You can do as
npm run watch-server && npm run watch-node && npm run watch-client
A quick google search for powershell suggested using semicolon
so on powershell you can do something like below if using && does not work
npm run watch-server;npm run watch-node ; npm run watch-client
Also keep in mind, you can additionally add fourth command in your npm scripts in package.json where you can use one of these combined commands which works for you, like
start-all: npm run watch-server && npm run watch-node && npm run watch-client
and then run
npm run start-all
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 would like to command "electron-packer ." (it takes some time) and then "asar pack app app.asar"
Is it possible to do this?
Or should I simply wait for the first one and command the second?
You can queue commands like this.
npm run pack1 && npm run pack2
Or you can add another line that does the above and just run that alone.
"scripts": {
"pack": "npm run pack1 && npm run pack2"
}
Add this inside your "scripts" and you can just run npm run pack to run both of those commands.
I have these 2 commands in my npm scripts
"scripts": {
"webpack": "webpack --config webpack.config.js --watch",
"server": "nodemon server.js",
}
As you can see, one runs webpack every time I save a file and one just runs the server with nodemon so I don't have to type "npm start" or something of the sorts every time I save a file.
Now this works fine but I need 2 terminals always open to run it and it gets a little crowded on my screen.
And I can't have one command read like this:
"start": "npm run webpack && npm run server"
becase the webpack command is ongoing and will never reach the second command.
Is there a way to have these two commands in 1 terminal, is this even advisable?
You could run one process in the background with & (one ampersand, not two) but that would require you to manage it manually, which would be rather tedious. For details see What does ampersand mean at the end of a shell script line?.
For that use-case someone built concurrently, which makes it simple to run processes in parallel and keep track of their output.
npm install --save-dev concurrently
And your start script becomes:
"start": "concurrently 'npm run webpack' 'npm run server'"
If you want to make the output a little prettier you can give the processes names with -n and colours with -c, for example:
"start": "concurrently -n 'webpack,server' -c 'bgBlue.bold,bgGreen.bold' 'npm run webpack' 'npm run server'"
Its easy actually, use & instead of && if you don't want to wait for the first one to finish. By adding & to the end of a command, you tell to execute in the background.
Simple example
npm run webpack & npm run server
Advanced example:
I run 2 watchers (1 is a vue app, the second is a scss/js theme folder) in 1 window in 2 different folders actually. So a combination of double && and single &
(cd ~/some-path && yarn encore dev --watch) & (cd ~/some-other-path/ && yarn run dev)
The output of both watchers is mixed but is no problem actually. Only readability will decrease.
One downside is that when you hit ctrl-c to stop the processes like you used to do, it only closes the currently running non-background task. The first is running in background because it was followed by &.
So if you want to stop both processes, just close the terminal window and both will be finished.
Or hit ctrl-c to stop the open process
followed by following command to:
kill the last background process:
kill %1
OR
kill the last command
kill $!
I have multiple scripts in package.json, most of them call some .js e.g. "copyResources" bellow. If I will run "npm run -s copyResources" in shell, it will execute silently. So far so good. But I would like to run "npm start" which will execute copyResource silently, example bellow, but this is not working (it's not silent). :(
Later I will have more scripts in "start" and I want to run some of them silently and some of them not. Thats the case why I can't just do npm start -s ...
"scripts": {
"copyResources": "echo 'Copy resources =>' && node ./bin/copyResources.js",
"start": "npm run -s copyResources"
}
Thank you very much!