![Visual Visual](https://i2.wp.com/www.ryadel.com/wp-content/uploads/2016/07/visual-studio-2015-nodejs-options-2.jpg)
![Visual Studio For Mac Nodejs Visual Studio For Mac Nodejs](https://code.visualstudio.com/assets/docs/nodejs/nodejs/moduleintellisense.png)
Visual Studio Code is the first code editor, and first cross-platform development tool - supporting OSX, Linux, and Windows - in the Visual Studio family. At its heart, Visual Studio Code features a powerful, fast code editor great for day-to-day use. I'm trying to debug my node js project on Mac. It works very well in 'Launch' mode but not in 'Attach' mode. In 'Attach' mode, when I start debugging, I see VS Code first trying to start the debugg. Visual Studio Code is a lightweight, yet powerful source code editor that runs from your desktop.* It comes with built-in support for JavaScript, TypeScript and Node.js and has a varied array of extensions available for other languages, including C++, C#, Python, and PHP.
You can use Visual Studio or your own custom development environment to build SharePoint Framework solutions. You can use a Mac, PC, or Linux.
Note
Before following the steps in this article, be sure to Set up your Office 365 tenant.
In general terms Visual Studio for Mac is an integrated Macintosh development environment for C# and F# applications that run on iOS, Android, and Mac targets, with a variety of application forms. Thank you for your feedback! It looks like a solution was accepted. We are continuing to make changes to reduce the system impact of the Node.js process.
You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:
Install developer tools
Install NodeJS
Install NodeJS LTS version 10.
- If you are in Windows, you can use the msi installers in this link for the easiest way to set up NodeJS.
- If you have NodeJS already installed, check that you have the latest version by using
node -v
. It should return the current LTS version. - If you are using a Mac, we recommend that you use homebrew to install and manage NodeJS.
The current supported LTS version of NodeJS for the SharePoint Framework is both 8.x and 10.x. Notice that 9.x or 11.x versions are currently not supported with SharePoint Framework development.
Install a code editor
You can use any code editor or IDE that supports client-side development to build your web part, such as:
The steps and examples in this documentation use Visual Studio Code, but you can use any editor of your choice.
Install Yeoman and gulp
Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.
Enter the following command to install Yeoman and gulp:
Install Yeoman SharePoint generator
The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.
To install the SharePoint Framework Yeoman generator globally, enter the following command:
For more information about the Yeoman SharePoint generator, see Scaffold projects by using Yeoman SharePoint generator.
Trusting the self-signed developer certificate
The SharePoint Framework's local webserver, used when testing your custom solutions from your development environment, uses HTTPS by default. This is implemented using a development self-signed SSL certificate. Self-signed SSL certificates are not trusted by your developer environment. You must first configure your development environment to trust the certificate.
A utility task is included in every SharePoint Framework project in the form of a gulp task. You can elect to do this now, or wait until you create your first project as covered in the Build your first SharePoint client-side web part (Hello World part 1): Preview the web part tutorial.
Once a project has been created with the Yeoman generator for the SharePoint Framework, execute the following command from within the root folder of the project.
Note
This assumes you have installed all dependencies with
npm install
after creating the project. This step will install all gulp tasks as part of a project.Optional tools
Following are some tools that might come in handy as well:
Next steps
You are now ready to build your first client-side web part!
Troubleshooting
SPFx Development for SharePoint Server 2016
SharePoint Server 2016 uses the SharePoint Framework (SPFx) v1.1. Around this the time of the v1.1 release, NodeJS was transitioning from NodeJS v6.x to v8.x. In this update, NodeJS introduced a change where the default changed from HTTP1 to HTTP2. For some, this caused issues with SPFx. A later version of SPFx resolved these issues, but those who are still working with SPFx v1.1 (such as those working with SharePoint Server 2016) may run into issues.
To resolve this, set the following environment variable to instruct NodeJS to use HTTP1 instead of the default HTTP2:
NODE_NO_HTTP2=1
.For more information, refer to issue #1002.
Unable to Trust the Self-signed Development Certificate
In some cases, executing the command
gulp trust-dev-cert
, does not have the desired effect of trusting the self-signed development certificate on your machine. In rare cases such as these, you may need to delete a hidden folder that's generated in your profile folder. Locate & delete the folder <homedir>/.gcb-serve-data
and then try to trust the self-signed development certificate again.Unable to Install Packages with NPM - Corporate Proxies
If your development environment is behind a corporate proxy, you need to configure NPM to use that proxy. Refer to the npm-config documents on how to configure your development environment behind a corporate proxy.. specifically the proxy & http-proxy settings. More information: How to setup Node.js and Npm behind a corporate web proxy
Note
If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the issue list at sp-dev-docs repository. Thanks for your input in advance.
Active9 months ago
Does anyone know of a sanctioned way to update Node within Visual Studio 2017? I've got Node 6 set up on my development PC but VS2017 appears to come with a bundled copy of Node 5, which means that running
npm install
on my command line sets up various packages like node-sass
with bindings for Node 6, so when I then run gulp tasks from the VS Task Runner things fall over due to the mismatched versions. I found the VS Node install at
Henry WilsonHenry WilsonC:Program Files (x86)Microsoft Visual Studio 14.0WebExternal
but I'm a little reluctant to just hack about and replace it. Anyone got any experience of upgrading this? I know I can sync by downgrading the version on my PC but that seems backwards. 1,79633 gold badges2626 silver badges3838 bronze badges
4 Answers
Go to:
Tools > Options > Projects and Solutions > Web Package Management > External Web Tools
Then you need to add your Node install directory to the top of the list, like so:
Joe ClayJoe Clay18.9k33 gold badges4141 silver badges5858 bronze badges
You don't need to add a new Node install directory, Node exists in PATH.Notice how $(PATH) is below the internal path $(DevEnvDir)ExtensionsMicrosoftWeb ToolsExternal.
To use the global PATH environment variable before the internal path, you can just use the arrows at the top-right to change the order.
This is what it looks like when the global PATH is searched before the internal one and therefore will make Visual Studio use your own versions of the tools.
Eduardo Yupanqui QuispeEduardo Yupanqui Quispe
For me, the issue turned out to be that there was a local
node.exe
file in the same directory that the csproj
file was in, along with a node.exe.config
file.I had a post-build event that would call
gulp
to do some other work and VS2017 would use the local node.exe
file rather than what was listed in my $(PATH)
variable. This was an earlier version of node that I didn't want to use, so the solution for me was to either remove the local node.exe
so the one listed in $(PATH)
would be used or upgrade the local node.exe
file if the node.exe.config
is really needed.I just wanted to add this here in case someone else runs into this same issue.
JosephJoseph4,27611 gold badge1919 silver badges2323 bronze badges
It looks as if options in
Tools > Options > Projects and Solutions > Web Package Management > External Web Tools
have no effect. However it is possible to set the Node version through
Acdsee photo studio for mac review. Project > Properties
JMaFvJMaFv