Hi is there a way i can keep webpack devserver running even after closing terminal.
"scripts": {
"dev-server": "npm run templates && webpack-dev-server -d --https --port 28443",
}
when i run npm run dev-server it starts but after closing terminal webpack devserver also closes is there any way to keep it running with pm2 or any other method.
use nohup
So if the script command is "dev-server" (according to your snippet), then go to your project root directory (where the package.json file is, which has your "scripts" section):
If on unix environment, just run nohup npm run dev-server &
If on windows, install git bash - it's sort of a mini unix environment for windows. And then run the nohup npm run dev-server &
This will start the webpack dev server and keep it running on the background
For me, my script section is
"scripts": {
"dev": "webpack-dev-server --open"
}
and the above command that I mentioned works fine
nohup did somehow not work for me, but i was able to make it work with forever.
sudo npm install -g forever
forever start -c "webpack serve" ./
Related
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
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'm developing an Express app. The code uses ES6 import statements, so it needs to be transpiled by Babel in ES5 code so it can be run with Node. The ES6 source code is stored in my src directory, and the compiled code is placed in my dest directory.
I would like an npm command that I can run that will watch for any changes in my src directory, transpile the project into dest, and then restart the Express app.
Below is my solution so far (I run npm run server:watch). It uses chokidar-cli to execute the server:build and server:run scripts whenever any js file changes within my src directory. This works perfectly except that the Express app does not die when the code is transpiled again, so I get a 'port in use' exception when I try to run server:watch again.
// package.json
"scripts": {
"server:clean": "rm -f dist/*",
"server:build": "npm run server:clean && ./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist",
"server:run": "nodemon dist/app.js --watch",
"server:watch": "chokidar 'src/*.js' -c 'npm run server:build && npm run server:run'"
}
Am I on the right track here? What is the best solution to this sort of problem?
(For clarification, I am talking about transpiling server-side code, so webpack or any other module bundler would be inappropriate here)
nodemon is watching your dist files, and is never terminating. With your watch script, you're launching a second instance of nodemon every time there's a file change, hence the "port in use" error.
You need to launch nodemon once, and keep in running in the background while your watch script is running. This is most easily done with https://github.com/mysticatea/npm-run-all.
Install it by running:
npm install npm-run-all --save-dev
on the command line.
Then you'd edit your scripts to:
// package.json
"scripts": {
"server:clean": "rm -f dist/*",
"server:build": "npm run server:clean && ./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist",
"server:run": "nodemon dist/app.js --watch",
"server:watch": "chokidar 'src/*.js' -c 'npm run server:build'",
"server:dev": "run-p server:run server:watch"
}
Then, you simply run npm run server:dev on the command line to start up your server via nodemon, and start the watch/rebuild process, all in one command.
Side note: If you're developing on Windows, you won't be able to use single quotes in your scripts, you have to use double-quotes, escaped with \" in the JSON.
For someone who is coming from PHP background the process of killing node and starting it again after every code change, seems very tedious. Is there any flag when starting a script with node to automatically restart node when code change is saved?
A good option is Node-supervisor:
npm install supervisor -g
and after migrating to the root of your application use the following
supervisor app.js
You should look at something like nodemon.
Nodemon will watch the files in the directory in which nodemon was started, and if they change, it will automatically restart your node application.
Example:
nodemon ./server.js localhost 8080
or simply
nodemon server
forever module has a concept of multiple node.js servers, and can start, restart, stop and list currently running servers. It can also watch for changing files and restart node as needed.
Install it if you don't have it already:
npm install forever -g
After installing it, call the forever command: use the -w flag to watch file for changes:
forever -w ./my-script.js
In addition, you can watch directory and ignore patterns:
forever --watch --watchDirectory ./path/to/dir --watchIgnore *.log ./start/file
Various NPM packages are available to make this task easy.
For Development
nodemon: most popular and actively maintained
forever: second-most popular
node-dev: actively maintained (as of Oct 2020)
supervisor: no longer maintained
For Production (with extended functionality such as clustering, remote deploy etc.)
pm2: npm install -g pm2
Strong Loop Process Manager: npm install -g strongloop
Comparison between Forever, pm2 and StrongLoop can be found on StrongLoop's website.
You can also try nodemon
To Install Nodemon
npm install -g nodemon
To use Nodemon
Normally we start node program like:
node server.js
But here you have to do like:
nodemon server.js
node-dev
node-dev is great alternative to both nodemon and supervisor for developers who like to get growl (or libnotify) notifications on their desktop whenever the server restarts or when there is an error or change occur in file.
Installation:
npm install -g node-dev
Use node-dev, instead of node:
node-dev app.js
Notification on Changing file so server start automatically
console out put
Follow the steps:
npm install --save-dev nodemon
Add the following two lines to "script" section of package.json:
"start": "node ./bin/www",
"devstart": "nodemon ./bin/www"
as shown below:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node ./bin/www",
"devstart": "nodemon ./bin/www"
}
npm run devstart
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website
I use runjs like:
runjs example.js
The package is called just run
npm install -g run
Nodejs supports watching mode since v18.11.0. To run it just pass --watch argument:
node --watch ./index.js
Note: this is an experimental feature.