webpack-dev-server keep port alive after closing - node.js

I have a vue app created with the webpack-simple template.
I want to use an static port, so I hard code the port in the devServer property in the file webpack.config.js
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
port: 1123
},
The first time that I run npm run dev everything works fine. After I close the process with ctrl+c (using git bash in windows) and retry running npm run dev an error occurs telling me that the port is currently in use. If I change the port the first time it works then it repeats the same error (again and again).
I check the processs that is using the ports and it's node. I don't understand why node keep listening to those ports after I hit ctrl+c.
My dev script:
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot"
Info
OS: Windows
Terminal: Git Bash
Node: v9.5.0
NPM: v5.6.0
Webpack: 3.6.0
Webpack-Dev-Server: 2.9.1

If the process exits abruptly, it doesn't close cleanly the listening server. The node process is terminated but the operating systems keeps the port open (in TIME_WAIT state) for a given amount of time to allow for the queues of packets to empty (see the socket FAQ and section "2.7 Please explain the TIME_WAIT state.".
In node, you can mitigate this problem by trying to close the server on exit and uncaughtException events. See this reply to a related question.

Related

Webpack: "Unable to start the dev server. Error: The dev server is not running on port 3000." unless compiled twice

To play with an SSO project in office.js, I am using :
https://github.com/OfficeDev/generator-office 1.9.2,
node v16.16.0,
npm v8.11.0,
Visual Studio Code Version: 1.71.2,
Windows NTx64 100.19044.
This also uses webpack (webpack#5.74.0).
I got this to work (required some changes to the generated project).
Now I am adapting the project to my needs and got it to build.
But it now fails to start the webserver.
On the terminal in VScode, I issue :
"npm start", which is composed of these other scripts:
"start": "npm run build:dev && concurrently "npm run start:server" "npm run sideload"",
"build:dev": "webpack --mode development",
"sideload": "office-addin-debugging start manifest.xml",
"start:server": "office-addin-sso start manifest.xml",
The terminal tells me:
"Starting the dev server... (webpack serve --mode development)
Unable to start the dev server. Error: The dev server is not running on port 3000."
What I have tried:
I have looked through the webpack window output, tells me: "webpack 5.74.0 compiled successfully in … ms" (but more below).
I looked through %LocalAppData%\npm-cache_logs.
I scoured the %LocalAppData%\Temp\OfficeAddins.log.txt
I killed and restarted everything I could think of.
I checked the port is not used (w/ netstat -ano | findstr :3000)
I changed the port, gives same error on that port (package.json : "config": {"dev-server-port": 3001})
I checked the code for remaining errors (w/ office-addin-lint check)
I checked the office certificates are installed (w/ npx office-addin-dev-certs verify)
I issued: npm update
Then with the terminal window and webpack still showing, it occured to me to open another terminal on the side and start another npm start.
This time, I got a somewhat shorter output of webpack in another node window (showing only one line webpack 5.74.0 compiled successfully in … ms", the webpack window above from the first terminal showed this line twice).
Below is a diff of the webpack window output (run from terminal2 on the left; the port 8080 was changed automatically to the free one; so some webserver went up after all? though I could not browse to e/.g. https://localhost:3000/fallbackauthdialog.html).
At this point, I can sideload the office add-in in Excel without add-in error, press its taskpane's button and get debug output (on terminal 2, not in the debug console).
Can you please help get back to a more standard debug configuration, and point out to me what I may be doing wrong, or what other diagnostics I could run?

React start set port number from CLI

I'm attempting to start my react server through linux CLI with a specified port number. I am NOT asking about changing the package.json script to include a defined port number.
I need to be able to start multiple react instances with different ports through CLI.
I have seen recommendations such as
npm start --PORT=4000,
npm start --PORT 4000,
npm start -- --PORT=4000
Of which none work, they all set the port to the default of 3000, or if I have a defined port in the package.json such as 5000, it defaults to that.
Whats the correct command for setting the port through CLI?
you can do it by adding PORT=4000 before react-scripts start in package.json.
"scripts": {
"start": "PORT=4000 react-scripts start"
}
then you can execute npm start
It's actually an environment variable for the port, so you can specify a PORT environment variable beforenpm start
export PORT=3005; npm start #For Linux
$env:PORT=3005; npm start #For Powershell

npm wait for port/command before executing next (concurrently)

So in my npm package I currently have this script:
"start": "concurrently --kill-others \"npm run dev\" \"electron .\""
The problem is that since the server wouldn't be up yet when electron runs its command, it shows up as blank. This is resolved by reloading the app once the server starts.
So I was wondering if there was a way to wait for the server to start by detecting the port or some other method so that I don't have to do the reload myself.
Here's how I'm setting up the url (trying to implement Vue into it).
let format = live ?
url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
})
:
'http://localhost:8080'
// Specify entry point to default entry point of vue.js
win.loadURL(format);
The key here is to get your dev server up immediately and then implement auto reload or hot module replacement.
Have you looked at electron-webpack? Then your start script would look like:
"dev": "electron-webpack dev"
And your main.js:
const url = process.env.NODE_ENV !== 'production'
? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`
: `file://${__dirname}/index.html`
window.loadURL(url)
I'll recommend you to checkout electron-webpack-quick-start for an example of implementation.
You can use readyator if you want to wait for ports (or URLs) to be ready before starting your script.
Installation: npm i readyator
Waiting for port 80 to be ready before starting Electron with readyator:
readyator 80 "electron ."
It also comes with a handy Node.js API:
import {runWhenReady} from 'readyator';
await runWhenReady([80], 'electron .');

Run 2 MEAN js project on same ubuntu system

I want to run more than one MEAN js 0.4.2 project using grunt.
First project is running properly by second project giving below error:-
[nodemon] starting `node --debug server.js`
Fatal error: Port 35729 is already in use by another process.
Warning: Use --force to continue.
change port in /config/env/default.js
port: process.env.PORT || 3002,
Please help.I have changed default port(/config/env/default.js) from 3000 to 3002 but still giving same error.
Issue is with the nodemon, two instances of nodemon tries to run on same port.
Try to run
node server.js
Or,
you can try to configure nodemon as well.
https://github.com/ChrisWren/grunt-nodemon/issues/21#issuecomment-28116032

Grunt message: Fatal error: Port 35729 is already in use by another process

Grunt was working. But after moving my site's files up one directory, to sit at root, grunt stopped working:
Fatal error: Port 35729 is already in use by another process.
Would the path matter in this case? Looking at port 35729, I found that Grunt was the only process running on that port. I killed that process, confirmed that no other process was running on 35729, then ran grunt again, but still getting that same fatal error as before.
Although none of my config files changed for grunt since it was working, I thought I'd try using the "npm init" approach to create a new package.json, then run "npm install" again and confirmed it downloaded "node_modules". What else can I try?
I'm running Node v0.10.33 on Mac OS 10.10.5
Dont stop a process with Ctrl+C in the terminal.
Ctrl+Z will keep it running.
Find the process id by sudo lsof -i :35729
Then kill the process by sudo kill -9 PID
Rerun the grunt watch
Grunt watch was already running in a different project in my case. So I updated Grunt's watch task appropriately for live reload to watch on a different port.
watch: {
main: {
options: {
livereload: 35730,
livereloadOnError: false,
spawn: false
},
files: [createFolderGlobs(['*.js', '*.less', '*.html']), '!_SpecRunner.html', '!.grunt'],
tasks: [] //all the tasks are run dynamically during the watch event handler
}
}
Specified livereload:PORT
The problem is grunt-contrib-watch's live reload: https://github.com/gruntjs/grunt-contrib-watch/blob/v1.0.0/tasks/lib/livereload.js#L19
You can't have two grunt-watch with the livereload option set to true. Either set one of the livereload options to false or change the port of liverelaod to something else by setting the livereload option from true to other value than 35729, like live-reload: 1337.
See the docs for more: https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
Otherwise, you can run as many grunt processes as you want.
Problem solved. Although grunt-cli is installed globally, grunt gets installed locally with the project. So when I moved my site's files up one directory, and ran grunt from that new location, I was effectively launching a second instance of grunt, which found the port already occupied of course, by the earlier instance of grunt launched before moving files.
After I killed that process, grunt ran without a problem. I wasn't able to kill it using kill -9 so I used the Mac's Activity Monitor to issue "Force Quit".
solution :
Step 1
Run command-line as an Administrator. Then run the below mention command. Type your port number in yourPortNumber:
netstat -ano | findstr : (yourPortNumber)
Step 2
Then you execute this command after identify the PID.
taskkill /PID (typeyourPIDhere) /
Enjoy Coding !

Resources