SharePoint Framework in Visual Studio 2017

header

The problem

Since the introduction of the SharePoint Framework there has been a barrier of entry for the developers accustomed with the Visual Studio IDE because of the new toolchain that came this new Framework.

In the case of enterprises that already have set up a development modus operandi around the Visual Studio IDE and the Microsoft environment, it’s difficult and not very appealing to change the whole process because of the new framework. And in a big development team, it’s absolutely necessary to maintain a set of standards and good practices. And lots of these enterprises already use Visual Studio as a standard.

The Solution

So integrating the SharePoint Framework with Visual Studio comes as a solution to fit in the SharePoint Framework seamlessly within the enterprises ALM processes while at the same time lowering the barrier of entry for developers that are not acquainted with the new toolchain.

And because VS is so extensible and even the new  Visual Studio 2017 has improved support for Node.JS, Gulp and other open source tools there is really no reason to not be able to develop using the SharePoint Framework in Visual Studio 2017.

With this in mind the SharePoint Patterns and Practices team set out to create a Visual Studio Extension to support the SPFx on the IDE.

Who is this for?

  • Developers more familiar with the C#, Asp.Net  and Visual Studio paradigm.
  • Enterprises with ALM processes based on Visual Studio and Team Foundation Services.
  • Developers that need to integrate older projects with the new framework.

How does it work?

The Visual Studio Extension for SharePoint Framework wraps the command-line UI of the Microsoft Yeoman Generator (yo @microsoft/sharepoint) into a familiar Windows Forms experience, executes the generator project scaffolding behind the scenes and creates a Visual Studio project that includes all the necessary files for a complete web part project.

  • Developers can launch the Workbench local sandbox environment to test their web parts by pressing F5 or by binding to the Gulp Serve event in the Task Runner Explorer.
  • An Advanced mode provides full access to the Yeoman generator command parameters and an optional cmd.exe window to view the generator tasks in real time. If a developer wishes to dive deeper into the new toolchain provided by the framework.

Example

                       spfx extension start

spfx extension

As you can see from the images above, it’s pretty much straight forward to start a new project with this extension. First, we create a new project like any other VS project. Select the SPFx Web part Project. Choose a JavaScript framework or not (SharePoint Framework is framework agnostic). And finally, click Generate.

The scaffolded solution has exactly the same structure. And just by pressing the F5 button it will build and run the project on the Workbench.

spfx extension cmd

spfx extension workbench

Now we can easily start the development using the SharePoint Framework in Visual Studio 2017.

In summary

It’s understandable that the modern Web Stack development toolchain has a bit of a steep learning curve for developers who are used only to Microsoft technologies. It’s also difficult for enterprises with ALM processes already set in place to adapt. So this will be a great tool to ease that transition process.

This tool is not replacing the new toolchain. The projects created with it will still be interchangeable between IDEs. The SharePoint Framework is IDE agnostic and this extension is just opening up a new way of developing with this framework.

This tool will greatly improve the usability of the SharePoint Framework by making it available to a wider audience of Visual Studio users. It’s an open source and community driven initiative and it is awesome to see the evolution of the SharePoint Framework by the hands of the community. Currently only Visual Studio 2017 is supported but there will be support for the VS2015 in the future. We hope to see even more new improvements like this in the future!

Where to start?

Here you have the Getting Started from the Visual Studio 2017 Extension. If you prefer the video format here you have video from the SharePoint / Office 365 Dev Patterns & Practices Youtube channel.

Leave a Reply