Webpack-dev-server runs correctly the first time but returns errors if ran a second - node.js

When I run "npm run dev" which is dev: "webpack-dev-server --content-base src --inline --hot" it runs correctly and even updates the page im working on. However if I end the process then in the same terminal run the command "npm run dev" a second time it returns an error!
I have only just started learning webpack/react/node so I don't know whats going on.

You probably has another webpack server running or it was not properly shut down, so the address (127.0.0.1:8080) is in use. See the error message.

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?

Run NPM custom script that depends on the server being on

I want to run an npm script that needs the server to be up for the duration the script is being run.
My script is like this
"scripts" :{ "start": "tsc && node dist/app.js"}
That is my basic script to start my server which works fine. However,
I have a script within my node project called get_data.js that I will use to collect data and save to a database (npm run save_data). I want the server to be stopped when get_data.js finishes as I am just interested in getting data.
"scripts" :{
"start": "tsc && node dist/app.js",
"save_data": "tsc && node dist/get_data.js"
}
Obviously my save_data script is not right. Any ideas or recommendation what I can do?
I may be misinterpreting your question but i think what you want is process.exit(0);
At the end of "get_data.js" or whenever youve determined that you want the process to end in your script.
(Although i should note that get_data.js should run its course and end itself unless there is something in your code that is preventing this.)
You can directly call save_data inside start:
"start": "tsc && node dist/app.js && npm run save_data"

How to make background API server use hot reloading in a React project?

When I save changes to my client-side code, the browser hot-reloads as expected. But when I make changes to my server code, no hot-reloading occurs. This is a problem because we want to just run 1 command (i.e. npm start) to launch our React webpack-dev-server AND our API server, and rerunning the entire npm start to manually relaunch the server after changes is slow (because it unnecessarily relaunches the React dev-server as well). Also sometimes we forget to relaunch the server code, so in reality it should just hot-reload anyway.
I've looked across the internet and surprisingly can't find any straightforward solutions. I feel like I shouldn't have to eject the entire project and go deep into the webpack configurations to get this to work.
This is what the npm start portion of my package.json looks like now:
"scripts": {
46 "start": "concurrently --kill-others \"react-scripts start\" \"node server.js\"",
...
}
Is there perhaps a way I can do "react-scripts start" with a different target or something?

Configure Electron/Node To Run In Debug And Attach a Debugger

I'm a Java developer but I have to try and debug a Node based application which runs inside Electron. I use IntelliJ IDEA for Java development/debugging and have WebStorm for which I want to debug the JS application.
As a Java developer I am used to starting the JVM/Tomcat/OSGi container in debug mode to which I can attach IntelliJ as my debugger. This allows me to dynamically add breakpoints without modifying code in IntelliJ. I want to be able to do the same with the Electron application but I haven't been able to work out how to do this.
I have tried starting Election with the --inspect option as detailed here but cannot attach WebStorm to it. I've also tried setting up a run time configuration in WebStorm itself which works as far as starting Electron but terminates with the error 'connection refused'.
I've also used this and this to try and attach a debugger but to no avail. I also have to work on Windows so I'm facing having to deal with inadequate tools to determine if Electron is listening on a port.
Update
I can't put complete code here but I would start the application with:
npm run dev
And this is the relevant part package.json in the root folder of the application but WITHOUT any debugging options specified:
"dev": "concurrently --raw --kill-others \"npm run dev-server\" \"npm run start\"",
"dev-server": "webpack-dev-server --hot --inline",
"start": "cross-env WEBPACK_ENV=dev electron .",
The application starts up i.e. the Election window appears but terminates before it is completely rendered. I can't say for sure how far into the start-up it gets before failing.
Update 2
I've modified the package.json file dev and start lines to:
"dev": "concurrently --raw --kill-others \"npm run %NODE_DEBUG_OPTION% dev-server\" \"npm run %NODE_DEBUG_OPTION% start\"",
"start": "cross-env WEBPACK_ENV=dev electron --inspect=5858 --remote-debugging-port=9223 .",
But still get Connection refused.
To debug Electron main process, you need using Node.js run configuration; for render process, the Attach to Node.js/Chrome configuration is required.
Please see https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/ for more info
I found that WebStorm can debug the main process properly if electron is started with the flag:
electron . --serve --inspect-brk=5893
Note the 'brk', it stops the process until a debugger is attached.
Then I just created a run configuration (Attach to Node.js/Chrome) and specified the 5893 port, telling to reconnect automatically.

How to adjust Node.js build script to first build and then launch server

I have the following simple batch file "bld.cmd" script for easier testing, it first compiles stuff and then starts server. Problem is that "npm run build" (line 1) never returns, so I had to add start "start" prefix to open a second window for that and keep running build after 6 secs.
start npm run build
ping 127.0.0.1 -n 6 > nul
npm run dev
My question is, how can I make the line 1 (1st window) go away when I close the running server with CTRL+C or optionally how to adjust this script so that there is no need for starting line 1 in another window.
{ "main": "index.js", "scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon server/index.js --exec babel-node",
"start": "nodemon server/index.js" },
My assesment is that npm is actually running either npm.bat or npm.cmd. For that reason I would suggest you Call that batch file/Windows NT command script instead.
Call npm run build
Rem Timeout 5 >Nul
npm run dev
Call will run one batch program from another, returning to the calling batch file upon completion of the called one. If there are further commands below the last line in your posted script content then precede that command with Call too. I have Remarked the the command Timeout, (Ping in your example), as it is unlikely necessary.
See Call /? for its usage information

Resources