I have the below commands configured in npm scripts.Now, if i run the command "npm run dev" there is no response in command prompt. However, if the run the below command as "webpack -wd" in command prompt, then the command is working as expected. why, i am not able to run this command from npm scripts. I am using windows and have set the node path in environment variables as below
"scripts": {
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
}
C:\Program Files\nodejs;C:\Program Files\nodejs\node_modules\npm\bin;C:\Users\[username]\AppData\Roaming\npm
If you want to run webpack via the command line, you either need to install webpack-cli globally with npm i -g webpack-cli or you need to use npx like npx webpack -wd. This will run webpack the same way npm scripts do.
The problem you are trying to circumvent is that webpack by default does not build the first time in watch mode, so you either need to change a file after starting webpack or run webpack without watch.
Note: npx is part of the NPM/Node.js bundle
Related
I am looking for a way to do something like this:
package.json
[...]
"scripts": {
"test": "cd ./apps/my-awesome-app && npx cypress run",
"test:watch": "npm run test && --headed",
[...]
so then at the command line, running
npm run test:watch
will result in the following commands being executed:
cd ./apps/my-awesome-app
npx cypress run --headed
However, this is not working as expected. Is there a way to achieve this without repeating the whole "test"-string?
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 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.
In my docker file, I want to run test script inside it after app is up in Docker dev version. Problem is when I created a bash script and add like that, test script is not working.
Here is my package json file:
"scripts": {
"build": "./node_modules/babel-cli/bin/babel.js src --out-dir lib --copy-files lib --plugins transform-react-jsx --presets es2015",
"bundle": "./node_modules/browserify/bin/cmd.js lib/client.js -o public/js/bundle.js",
"start": "npm run build && npm run bundle && node lib/server.js",
"test": "mocha ./src/*.test.js"
},
and here is bash script file
#!/bin/bash
npm start
npm run start
npm test
npm run test
Please let me know how to fix it, thanks much.
#!/bin/bash
npm run build
npm run bundle
forever start ./lib/server.js
npm test
I've found solution that I need to install forever or pm2 first.