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.
Related
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 struggling to get set up with gulp in Visual Studio 2017. I'm not sure where I'm going wrong but there are a few things I'm confused about and I can't really find any online resources that are of any use.
The build system I'm using is CruiseControl.NET and I would like gulp to work with it.
This is what I've done so far:
Installed Visual Studio 2017 with .NET Core cross-platform development and Node.js development selected (amongst other options).
Created a new project
Added a gulpfile.js file to the project
Right-click on the file and choose Task Runner Explorer
In the Task Runner Explorer I get the error Failed to load. See output window (Ctl+Alt+O) for more information..
Then if I do the following:
Open the Node.js Interactive Window
Run the command .npm install --global gulp-cli
Close Visual Studio and open it back up again
In the Task Runner Explorer, I then get the message (No tasks found).
First off, is this the correct way to set up Gulp in Visual Studio 2017?
The reason I'm asking this is because I'm not sure why I need to prefix commands with a period character (ie .npm as opposed to npm).
I'm also not sure where gulp was installed because I can't find it in the path C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Web\External\node_modules.
Because of this I can't really set up CruiseControl.NET.
The way I'm handling this is to first use the Web Essentials 2017 extension. This installs the Bundler & Minifier tool, which then adds a bundleconfig.json file to your project. Right-click on this file, go to the Bundler & Minifier menu item and you will see an option in there to Convert To Gulp.
Selecting convert to gulp will create the necessary gulpfile.js and also install the npm packages required for using Gulp. Wait for all of the npm packages to install and you can then right click on gulpfile.js, select Task Runner Explorer and you should be ready to set up Gulp-based tasks. If you see gulpfile.js failed to load message, npm packages may still be installing (check the progress bar on the VS 2017 status bar). Hit the Refresh icon in Task Runner Explorer when all packages are installed and the error should vanish.
There's probably a more manual way to add Gulp support but I find this more automated method ensures all the tooling is wired up to work properly and I don't miss anything.
I gleaned all this information from the awesome Microsoft Docs site, specifically this page on Bundling & Minification. There's also a Using Gulp section in there that may provide additional details for your situation.
https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification
Microsoft have now added documentation on how to get gulp running:
https://learn.microsoft.com/en-us/aspnet/core/client-side/using-gulp
Make sure you update Visual Studio 2017 to the latest version as it now comes shipped with Node.js, NPM and Gulp (you don't need to pick "Node.js support" when installing Visual Studio for this to work).
Create an npm Configuration File (package.json) in your project folder and edit it to reference gulp:
{
"version": "1.0.0",
"name": "example",
"private": true,
"devDependencies": {
"gulp": "3.9.1"
},
"scripts": {
"gulp": "gulp"
}
}
In the project folder, create a Gulp Configuration File (gulpfile.js) to define the automated process.
Add the following to the post-build event command line for each project requiring gulp support:
cd $(ProjectDir)
call dotnet restore
npm run gulp
To run the tasks in Visual Studio 2017, open the Task Runner Explorer (View > Other Windows > Task Runner Explorer).
Then on the build server just install Node.js and ensure the path to node is added to the environmental path variable then when the build server builds the project gulp will run too!
I found the solution here. More information on that part of VS from Mads himself.
You have to force Visual Studio run with your Node.js version:
Go to Tools > Options in Visual Studio 2017
Go to Projects and Solutions > External Web Tools
Add the following path: C:\Program Files\nodejs
I have started to learn node js. I am using Visual Studio 2015 as IDE for working on Node JS. What are the steps to include a node js library to the node js project on Visual studio 2015 IDE? Normally I install libraries using
npm install library-name
I searched for the node js console window but it is not plugged in to the IDE.
Download the file and then just copy/paste the *.js file in your project and take a reference of it in your design page *.aspx (for ASP.NET) or *.cshtml (for ASP.NET MVC) saying
<script src="~/filename.js"></script>
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 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.