I have created a node project using the express-generator and have not added any additional code to it. If i run it from the npm command prompt with npm start, it is working on localhost:3000.
If i use the template from existing nodejs code in Visual Studio, hitting the debug or run button never works. It pops the node.exe console and closes it after one sec. "Debugger listening on port 5858".
Creating an express app from Visual Studio works as expected.
What do i have to configure to get it working the same way as a default project created with VS?
Update:
Seems that even if I take the files from the working project and use them to create another "From Existing Node.js code" the debug/run command fails. So i guess it has something to do with the project file, but i checked them and they seem to be the same. What am i missing?
After much digging i ran WinMerge on both projects and noticed that inside the project file StartupFile was set to app.js instead of bin/www.
To change the StartupFile, right-click on the JS app and select "Properties". Under "General", you will see "Script (startup file)", which is where you make the change.
Home this helps someone else trying to use Visual Studio as an IDE for node.js.
Related
I have followed the steps outlined in this so post, and have successfully created a React Application inside Visual Studio from the "Blank Node.js Web Application".
Everything works except debugging from VS!
I have also followed this Microsoft article here which describes exactly what I want to do!!! - It walks you through "how to setup a react app in Visual Studio using the node web app template". On that article they show debugging working, but it doesn't work for me.
I am using the standard npm command to create an application inside the visual studio solution directory. I have created myself a batch file that does the heavy lifting for me.
npx create-react-app ssm-app --typescript
At this point, everything works fine and I can even interact with the NPM packages from inside VS.
I have even installed NPM Task Runner inside Visual Studio which allows you to run the commands (such as Start) from the package.json.
Everything works except debugging from inside Visual Studio!
I have then attempted to wire up the "Start Debugging" button in VS to attach it the npm start command.
I did that by adding by finding this Microsoft article on how to extend the build process. I added the following code to the project file which works can calls npm start for me.
</ProjectExtensions>
<Target Name="AfterBuild">
<Exec Condition="'$(EnableTypeScript)' == 'true'" Command="npm start" />
</Target>
</Project>
It kinda works and does kick off a web browser and launch the app but Visual Studio toolbar just hangs. I think this is because npm start hasn't exited. I have tried changing the command to call npm start but it still hangs to toolbar.
Usually when you launch the debugger, the toolbar changes and you can see the stop button like below. That never happens
Any help would be greatly appreciated. Am I doing something wrong or am I approaching this from the wrong angle?
Thanks
Just closing the loop on this question.
In the end, I found out that the reason why Visual Studio hangs when you extend an .csproj file to call "npm start".
The reason is because the MSBuild "Execute" command blocks and does not exit. I tried prefixing the command with "start" but this has no effect.
https://learn.microsoft.com/en-us/visualstudio/msbuild/exec-task?view=vs-2019
So if you run notepad after the build, the vs output window will hang until you close notepad!
<!-- This wil block! -->
<Target Name="AfterBuild">
<Exec Command="start notepad.exe" />
</Target>
I gave up on my dream of debugging inside visual studio but I still wanted to create a react app using the official npm packages as well as setup a visual studio solution that tied the build command up with "npm start" and and "npm build"
Fortunelty I found this stack overflow post which provided an answer to the Execute Command.
MSBuild exec task without blocking
This allowed my to associate the "debug build" and "release build" in Visual studio to custom build targets in the project file.
Finally, because I wanted to to be able to generate a visual studio solution for every new React project I created, I knocked up a quick tool which wraps up everything I wanted all together:
The project:
Generates a visual solution project file
Sets up the "build/debug" command in visual studio to "npm start"
Sets up the "build/release" command in visual studio to "run build"
The project can be found here: https://github.com/OceanAirdrop/CreateReactAppVisualStudio
In Visual Studio Installer, I selected the Node.js development option. It runs successfully. But, if I try to run cmd node -v. It tells me node does not exist.
I tried a few other things including uninstalling and reinstalling the Node.js development option in VS Installer. Plus installing the latest version of node from the website.
However, when I try to run the pre-packed Angular solution that comes with VS 2017 I have issues. The solution will not even start.
The best I have been able to do is install Node 6.10.3. Once I do that, the web site comes up. But, I get a JavaScript error in the vendor.js file. I am able to continue but I get this error when I try navigate to another menu item. Plus the Hot Module Replacement does not seem to be working. (It does not automatically recompile my TypeScript file if I made a change).
I think the key is getting the Node.js development option installed correctly since I am able to run the pre-packed Angular solution on another PC and the Hot Module Replacement works fine.
Please let me know if anyone has any ideas on how to resolve.
I had a similar, if not the same, issue. Check the Visual Studio installation directory (2017 Professional in this case) for Node:
C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\Microsoft\VisualStudio\NodeJs
If the executable is there, add the directory to your PATH.
I'm trying to use Visual Studio (not VSCode) to create a simple Electron app. I'm doing so via the Node.js tools for Visual Studio (v1.1) extension. I'm using the basic quick start app which works fine if I launch via npm start, but if I launch via Visual Studio, I get the following error on start up:
'Cannot find module 'electron' on the first line:
const electron = require('electron');
Can I tell Visual Studio to launch the Electron app first before starting it's node.js debugger? Has anyone else gotten this set up to work at all?
This is possible:
Create a blank Node.js JavaScript console app in Visual Studio. You need a recent version of node installed I think: I have 12.18.3. I'm using VS 2019 Community.
Add a dependencies section to the package.json that's created and reference electron. I referenced 11.0.1 as below:
"dependencies": { "electron": "11.0.1" },
This puts an entry in Solution Explorer under npm, so to actually
install it you can right-click/install npm package (or fire up a
command prompt and do npm install).
Copy the code from the electron-quick-start on GitHub: create index.html AND preload.js files in your Visual Studio project, and paste the code from GitHub into them. Also paste the quick start main.js contents into app.js. There's no need to rename it.
Go to properties of the console app project file. Where it says 'Node exe path:' put the path to electron.exe that was installed, which is in subfolder node_modules\electron\dist\electron.exe.
Put a breakpoint on the first line of createWindow in your app.js.
Start in debug. It should break at the breakpoint and if you continue it will show the basic electron app. This is an Electron window with a message in it: e.g. 'Hello World! We are using Node.js 12.18.3, Chromium 87.0.4280.60, and Electron 11.0.1.'
This is all well and good, but how useful it is depends on what you really want Visual Studio to do for you. It will only break on the main thread, although you can debug the renderer threads using the Chrome dev tools as usual. I find the node tools apps a little limiting. Maybe one of the other project types would be better.
This answer was updated November 2020, and previous answers removed. Note that as usual in npm world things do tend to break over time: please make a comment if things aren't working for you.
I'm currently trying out Node.JS and using Visual Studio Community with Node.js Tools as my primary IDE.
If I would create an Express application using this interface:
Then I would hit F5, my Express application would start and I'd see this nice debug window:
However, if I install Sails.js using npm -g install sails, I no longer see this debug window in my test Sail.js app (if I create one in my Visual Studio), nor in Express app.
My application would start as expected, except that I can't see debug window anymore.
Debug window comes back only if I do following:
Remove Sails from my machine using npm -g uninstall sails
Reinstall node.js
How do I get debug window if I have Sails installed? I'd like to have it for both Express and Sails applications.
Ran into a similar issue of running Sails application inside Visual Studio. Here's how I got my project properly running in Visual Studio, in case any stumbles on that question.
Create Create Blank Node.JS Console Application in the VS
In another folder outside of your project initialize your sails app (if you haven't already), e.g. sails create appName. If you already know your API controllers/models, it's a good idea to create them right now. If not, you'll have to do it manually rather than using sails generate api
IMPORTANT: In Sails project folder, remove node_modules, in my case existing node modules were throwing VS npm off the track
In the visual studio, right click on your project, go to Add > Add Existing Folder...
Select your folder with Sails Application
Once it's imported, you'll notice that you have a folder with sails application that also has app.js. Select all the contents of sails project and move them a level up to your root. It should replace app.js, package.json & readme.
Right click on npm, select Install missing packages...
After that, right click on you app.js file and select it as start js file
Run/Debug the application. It should work just fine.
Hope it helps.
I am following along with Shawn Wildermuth's Node.js for .NET Developers. I have already install NodeJS Tools for Visual Studio from nodejstools.codeplex.com.
Everything appears to have installed properly, I have just created a "NodeJS Blank Website".
However, when Shaun says to right click the NPM node in the solution and choose "Manage NPM Modules", I do not have it.
I circumvented the problem by doing an install from NodeJS command prompt directly but I sure would like to know why Visual Studio is ever changing and never consistent. I need a new & better IDE.
Help anyone?
I had same problem, and according to the Error message window, PATH in Environment Variable was not set to the location to nodejs folder. After I changed nodejs folder location to C:/Program Files/nodejs, right click and "Install new npm packages..." worked well to install Express. Hoping this would help for you too.