The SharePoint Framework Visual Studio extension adds new "SPFx" project and item types types to the available options in Visual Studio 2015 & 2017. This makes the process of starting a new web part project similar to creating projects in the past. Please note that only WebPart projects are supported at this time (support for Extension projects and items will be added in the future).

• 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
  • In VS2017, select SharePoint Framework

• The extension will display a form to capture the information required of the Yeoman generator

• 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 Properties tab of the form.

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.

Depending upon your machine configuration, it may be necessary to change the version of Node.js used by Visual Studio so the Gulp tasks created by the Yeoman Generator run properly when pressing F5 or using the Task Runner Explorer. Follow these steps to ensure the correct version is in use:

1. Select Tools > Options from the menu bar.
2. Scroll down and expand the "Projects and Solutions" section.
3. Select the "Web Package Management" node.
4. Find the local installation of Node.js that was installed when configuring the machine for use with the SharePoint Framework (or other Node projects outside of Visual Studio) in the list. The path should look something like "C:\Program Files\nodejs". The entry in ".\node_modules.bin" is the version installed by Visual Studio and will not work correctly with SPFx.
5. Using the arrow keys in the upper right corner of the Options dialog, move the selected Node.js entry up to the top of the list.
6. Click 'OK' and close the dialog. Visual Studio will now use the proper version of Node during debug/run operations.

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.