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 “yo@microsoft/sharepoint”, now it is possible to create them using Visual Studio. We have cool Visual Studio extensions to perform it.

Prerequisites

Set up your O365 tenant using this link
Set up your development environment by following the instructions from this link.
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.

In the next window, select the developmental frameworks like React, Knockout. I chose none to continue without any framework. Choose the environment type, it can either be SPO (SharePoint online) or on-prem. Then, provide your component-related details like component type (web part 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 install it manually. I am checking this “Do not automatically install dependencies (skip ‘npm install’ command)” because it consumes a lot of time and sometimes VS can be crashed while performing this operation. Then Click on “Generate”.

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

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 add the web part in the workbench and work on it.

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>
</div>
</div>
</div>
</div>`;
}
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.

You will be able to run the same inside your SharePoint environment by using the below URL

https://<your_sharepoint_site_collection_url>/_layouts/workbench.aspx

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