Use Visual Studio or your own custom development environment to build SharePoint Framework solutions. You can use a Mac, PC, or Linux. You can use any code editor or IDE that supports client-side development to build your web part, such as: Visual Studio Code. SharePoint client-side development tools include a Yeoman generator for. SharePoint client-side development tools are built using TypeScript classes, modules, and interfaces to help developers build robust client-side web parts. The following are some key files in the project. Getting started - creating a client web part “project” Seasoned SharePoint developers are used to opening Visual Studio and doing File > New > Project > and selecting one of the SharePoint templates, even if just an empty SharePoint project, or adding an item to an existing project using Add > New item > SharePoint > Empty element or similar. Use Yeoman SharePoint Generator to create the client side web part as. And will create a Node-based HTTPS server at ‘localhost:4321‘ and open the browser and display the client web part in local workbench. SharePoint Workbench is a developer design surface that enables developer to test the developed client web parts without. SharePoint search using PnP in SharePoint Framework (SPFx) Client Web Part. Let's go through step by step creation on client-side web part using SharePoint framework using SharePoint PnP and display the search results with Office UI List. This will open ‘Visual Studio Code’ IDE.
SharePoint Framework client-side web parts can be added to the page just like any classic web part. The web part will then appear on the page. SharePoint Framework client-side web part added to a SharePoint 2016 on-premises wiki page. Getting started - creating a client web part “project” Seasoned SharePoint developers are used to opening Visual Studio and doing File > New > Project > and selecting one of the SharePoint templates, even if just an empty SharePoint project, or adding an item to an existing project using Add > New item > SharePoint > Empty element or similar.
-->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.
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.
Note
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
Visual Studio
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!
X Code
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.
Microsoft Visual Studio For Mac
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.
Visual Studio For Mac Os
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.