Create SPFx Web parts or Extensions using Visual Studio 2017

SPFX is the developmental framework provided by Microsoft to create, build and install apps on SharePoint or Office 365. Using SPFx  Initially SPFx web parts and Extensions are created using commands like abc@microsoft/sharepoint, now it is possible to create them using Visual Studio. We got cool visual studio extensions to perform it.


1. Set up your O365 tenant using this link
2. Set up your development environment by following the instructions from this link.
3. Download and install the VS extension from this link.

 Get Started:

After installing VSIX, Open Visual Studio then File -> New -> Project.  You could see the below window. Choose SPFx Project which comes under Office/Sharepoint->SharePoint Framework section. Provide your solution name and related details and click on Ok.

SPFx Project

In the next window, select the developmental framework like react, knockout. I chose none to continue without any framework. Choose the Environment type, either it can be spo (SharePoint online) or on-prem. Then, provide your component related details like component type(webpart or extension), name and description. Skip Feature Deployment checkbox is to configure the app to deploy it globally inside a tenant so that it will be available for all the site collections. I am unchecking it since I will can install it manually. I am checking this,do not automatically install dependencies (skip npm install command) because it consumes lot of time and sometimes VS can be crashed while performing this operation. Then Click on Generate.

Skip Feature Deployment

The project will be created in the matter of seconds. Then open the command prompt and point the location to the project location run the npm install command to install the node packages separately.

npm install

After successful installation of node modules, just click on F5 from your visual studio to run the application. It will open the workbench in a new browser window.


You can able to add the web part in the workbench and work on it.

SharePoint Workbench-1

I am customizing the webpart.ts like below from the project to display the username.

export default class MyWebpartWebPart extends BaseClientSideWebPart<IMyWebpartWebPartProps> {

  private user: any;

   protected onInit(): Promise<void> {

    this.user = this.context.pageContext.user.displayName;

     return super.onInit();


   public render(): void {

    this.domElement.innerHTML = `

      <div class=”${ styles.myWebpart}”>

        <div class=”${ styles.container}”>

          <div class=”${ styles.row}”>

            <div class=”${ styles.column}”>

              <span class=”${ styles.title}”>Welcome ${this.user}!</span>








  protected get dataVersion(): Version {

    return Version.parse(‘1.0’);



  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [


          header: {

            description: strings.PropertyPaneDescription


          groups: [


              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField(‘description’, {

                  label: strings.DescriptionFieldLabel










Now you can see the changes on screen. Since we are running it in localhost workbench, it doesn’t take the SharePoint context and so it is displaying as below.

User 1

You can able to run the same inside your SharePoint environment by using the below url


After opening the page, add the same web part and see the difference.

Create usergroup

Hope this article is helpful. Though Visual Studio is heavy, it is very much faster than previous versions like 2015. So let’s start building our SPFx apps using Visual Studio IDE instead of using Command Prompts.

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *