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?
Related
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.
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.
I've looked around and had a lot of trouble figuring this out. I'm hoping someone might be able to point me to a post or have information on how to do this.
My problem is that I have 2 projects I've made using WebStorm:
I have 1 application that is my server-side code running on port 3000. It's a simple Node Express app.
The second application is an Angular 4 / Ionic 3 application running the client side on port 8100.
I want to run my server application in debug mode, so that it hits the breakpoints for all the data being sent from the client side app.
For example: Angular / Ionic app sends a get request for all clients for a given customer. The customer is sent via url parameter. I want the server code to pause when it receives this request and so I can see this URL parameter. Fairly simple.
The server is also using grunt to build the project, and nodemon to watch it. I'm using some npm scripts to make life easy. Here are the scripts:
"scripts": {
"dev": "SET NODE_ENV=development && nodemon ./bin/www",
"grunt": "grunt",
"start": "node ./bin/www"
},
Nothing fancy.
I have WebStorm configured to run my scripts from hitting play. So the play button will first run the following sequence:
npm run grunt
npm run dev
Again ... nothing fancy.
Now how do I get this thing to setup a debugger so I can listen in WebStorm? I have a both projects open in separate windows, and I am initiating the calls to the server from the client. How do I make the break points grab hold and show me the data coming into the server?
I feel like this is incredibly easy and I'm missing something really stupid. Any help would be much appreciated.
You need starting you server in debugger to get breakpoints in your server code hit. If you prefer to start your app via npm script, you have to add $NODE_DEBUG_OPTION (or %NODE_DEBUG_OPTION% on Windows) to make sure that Node.js is started with appropriate debug options (--debug-brk, --inspect-brk, etc)
So:
in package.json, modify your dev script as follows:
"dev": "SET NODE_ENV=development && nodemon %NODE_DEBUG_OPTION% ./bin/www"
right-click your package.json, choose Show npm scripts
right-click dev script in npm tool window that opens, choose edit 'dev' settings to create a run configuration.
open your source files in editor, add breakpoints
press Debug to start debugging
run your client app, initiate the calls to the server
I have completed todo app by learning from this video:
Super MEAN Stack Tutorial: Angular, Node/Express, Webpack, MongoDB, SASS, Babel/ES6, Bootstrap
In that video at time 19:18 at this url it is taught that I should use the below two commands in seperate git-bash instances if I want to run it in windows using npm run dev:
node server
webpack-dev-server --progress --colors
But in Linux (or any other OS than windows) you can use this script:
"Scripts": {
"start": "NODE_PATH=$NODE_PATH:./src node server",
"dev": "npm start & webpack-dev-server --progress --colors"
}
So, Is there any way I can do the same in windows?
Also, In that tutorial I can see that port no. 3000 is assigned to node server, but due to using dev dependencies he runs the localhost:8080 in browser. You can see that here. After the tutorial finishes, I followed along and created that app. Now I would like to deploy it. So, I would first like to learn to run test my site in non-dev dependencies mode. i.e. when I type localhost:3000 in browser, my app should run successfully. So, can anybody explain the steps for that?
Update:
I am a newbie in node.js. I watched many videos on node and tried to learn something from that. In all the videos I see that I run node server on port no. 3000 and then I type localhost:3000 in my browser. Now lastly I watched video about mean stack in which he uses webpack. Now, I am confused. I think there are two servers running. first server is webpack's server and second server is node's server. Upto today I typed localhost:3000 in my browser because I mentioned that port 3000 will be used by node in my code. But now in the video he is running localhost:8080 in browser. It means webpack's server is used. Then what happened to node server. Why can't I just run localhost:3000? Also in the video it is explained that webpack is a dev dependency. So, I think after the app is completed and ready to be deployed, my project can be run on the node server (by making some changes to the code, I am not sure). Let's take an example. Now I don't want to deploy the app to a real server. I want the same app to run on my friend's pc. He is not a developer. So, he should not depend on webpack as webpack is a dev dependency. So, he should be able to run the app on node server instead of webpack's server. So, he should type localhost:3000 instead of localhost:8080. That's what I don't understand.
Let's break this down:
If you've defined this script:
"Scripts": {
"start": "NODE_PATH=$NODE_PATH:./src node server",
"dev": "npm start & webpack-dev-server --progress --colors"
}
... then this npm command: npm run dev
... actually invokes these two actions:
a) npm start & # Runs NPM in the background
b) webpack-dev-server --progress --colors # Concurrently runs webpack in the foreground
You can accomplish the same thing in many ways using Windows, starting with a simple .bat file like this:
EXAMPLE: RunDev.bat:
start npm start
webpack-dev-server --progress --colors
=======================================================================
STRONG SUGGESTION:
Please forget about watching videos for a few moments. Try a couple of "hello world" tutorials. More importantly, play with the actual code. Try changing things in the code, and see what happens.
Forget about webpack, at least for the moment.
Think of npm as a "build tool"; not as a way to run your application. At least for a moment.
Focus on "node". Write a "node application".
Part of your "node application" will require "ExpressJS" and "Jade" (now renamed "pug" - I'm still using "Jade"). Use npm to get your ExpressJS and Jade dependencies, but stay focussed on Node.
SUGGESTED TUTORIAL:
A Simple Website in Node.js, Ben Gourley
Be sure to:
a. Download the code
b. Work through the tutorial, using the downloaded code
Please post back (a new post) with any specific questions you might have as you work through the tutorial.
I have npm task that loads concurrently, node-inspector, and node-supervisor.
{
"start": "concurrently --kill-others \"node-inspector\" \"set NODE_PATH=.&&supervisor -n error -- ./bin/www --debug\"",
"prestart": "start chrome http://localhost:3000 http://localhost:8080/debug?port=5858"
}
Result:
[1] set NODE_PATH=.&&supervisor -n error -- ./bin/www --debug exited with code 0
--> Sending SIGTERM to other processes..
[0] Node Inspector v0.12.7
[0] Visit http://127.0.0.1:8080/?port=5858 to start debugging.
But when I'm trying localhost:3000 I get ERR_CONNECTION_REFUSED.
QUESTION 1: How I can pass NODE_PATH=. (or any other ENV variable) to supervisor - so my node runs correctly?
QUESTION 2: Or maybe you know, how to organize two watch tasks within npm scripts? for example: node-supervisor and node-inspector
Note1: If I run set NODE_PATH=.&&supervisor -n error -- ./bin/www --debug directly from command line - works well.
Note2: If I run npm start without NODE_PATH=.&& it works well but node error - cause it can't find modules for example require('helpers/log') or require('models/user') cause i don't want to place everything in node_modules.
Stats:
Windows 8.1
Node 4.4.0
npm 2.4.0
For your first question, check out the handy helper module cross-env
It's designed for exactly this purpose, and is easy to use. Just use cross-env where you'd typically use UNIX-style env, and away you go. Mine, for example, looks like:
"scripts": {
"start": "cross-env DEBUG=express:router webpack-dev-server ...."
}