Getting Started
The SharePoint Framework Visual Studio extension adds a project template. This makes the process of starting a new web part project similar to creating projects in the past.
In Visual Studio, click File > New > Project
In the New Project dialog, expand the Office/SharePoint node
In VS2015, expand the SharePoint node and select SharePoint Framework
/images/VS2015-New-Project-Dialog.png
- In VS2017, select
SharePoint Framework
/images/VS2017-New-Project-Dialog.png
- The extension will display a form to capture the information required of the Yeoman generator
/images/SPFx-Vs-Ext-Wizard-Properties.png
- Complete the form as required and click
Generate
It is important to note that the extension does not replace the Yeoman generator. The generator is executed by the extension. In the project folder, the generate.log file will contain the console output of the generator. If you wish to see the generator as it runs, tick the box labelled Show the command window on the Advanced tab of the form.
/images/SPFx-Vs-Ext-Wizard-Advanced.png
Once the generator completes, the files used to create the webpart are shown in solution explorer. The files required to support the build process and the local workbench are excluded from the project.
Pressing F5 (or otherwise invoking the Run function) is supported. Visual Studio will open an Node command window and run the gulp serve command. This will cause the webpart to be "compiled," which in the case of SPFx webparts mean running the TypeScript processor along with the tests, SCSS and packaging processes. Once the compile is complete, the gulp task will launch the local workbench in the default browser.
Like most Visual Studio projects, an item can be added to an existing project. The Add Item dialog contains an entry titled SPFx Web Part.
The Add New Item wizard will display a form for capturing the information necessary for the Yeoman generator. This process is similar to the project creation.
The advanced tab of the extension forms provides a Command String box in which any additional parameters can be specified. These parameters are passed, as entered, to the command window. No validation is performed -- any errors can be viewed in the generator.log file that is created in the project folder.