Microsoft have introduced another development methodology called as SharePoint Framework, which is claimed more flexible than earlier approaches like Farm Solutions, Sandbox Solutions, SharePoint Add-ins.

 

 

SharePoint Framework is compatible with a complete Web Development Stack with an inherent support to all modern JavaScript frameworks like React, Knockout, Type Script and so on.

In this article, we would be covering the steps required to get developer machine ready for starting with SharePoint Development using SharePoint Framework as well as we would be building our first Webpart using SharePoint Framework.

Before we dive into the details, it is good to revisit the SharePoint development models we had.

84. SharePoint development models revisit

As you see above, we never had a simple way to support the SharePoint Online development.

The SharePoint framework is JavaScript. SharePoint Framework brings the new SharePoint UX, using open source tools like Yeoman scaffolding, Gulp and REST-based APIs for building SharePoint web parts. It allows any Java script frameworks like React JS, Angular or Knockout JS. 

Benefits:

  • Full client-side development
  • Central to Microsoft’s office development story going forward
  • A controlled and supported way to allow you to inject custom functionality
  • Works in both classic site collections and modern team sites
  • Cross platform, the next evolution in SharePoint development

Following are the steps required to set up the development machine

  • Install Node JS
  • Install Windows Build Tools
  • Install Visual Studio Code
  • Install Yeoman
  • Install SharePoint Yeoman Template
  • Install Gulp
  • Install SPFX Developer Certificate
  • Create a new SharePoint solution
  • Build and deploy the SharePoint solution

86. 1. SharePoint framework tools details

 

NodeJS
NodeJS can be downloaded from here: https://nodejs.org/. As per recommendation from the Technical Community, it is advisable to go for LTS Version of NodeJS.

93. Download NodeJS

Visual Studio Code:
You can download the Visual Studio Code from here : https://code.visualstudio.com

94. vscode

 

Other Tools:
You can install the remaining tools from NPM as shown below, please note that I have used PowerShell to run the NPM commands.

 

95. Install Typescript

 

 

SharePoint solution:
Next step is to create a SharePoint solution, build and deploy.

 

At times, it would throw an error stating that SSL is invalid or something like that. To fix this, you may have to run the following command.

 

96. create a solution

It would open the local workbench where you can find your webpart and play around.

97. local workbench

You can also access the SharePoint Online workbench as shown below, as long as the gulp serve command is running you can add your local webpart on the SharePoint Online workbench.

98. online workbench

 

Visual Studio Code:
The following command would open your solution in Visual Studio Code editor 

 

99. vscode editor

Some of the most useful Gulp commands

  • gulp –tasks
  • gulp build
  • gulp bundle
  • gulp package-solution

Usually you would use the following commands to package your solution for production

  • gulp clean
  • gulp build –ship
  • gulp bundle –ship
  • gulp package-solution –ship

The following NPM command would install all the required packages are mentioned in package.json

 

The following NPM command would initiate the start task.

 

 

Production ready package:

As you see above, SharePoint Online workbench would work as long as “gulp serve” is running, this is fine for development. To make the package production ready, we have to let the package use either CDN or SharePoint Online to serve the required dependencies.

In the real wold, we would be using the actual CDN but for demo purposes, I would be hosting it on my local machine.

Step#1: Add an entry on the host file 

 

Step#2: Update the CDN Path

100. cdn path

Step#3: Update the package.json to include the lite-server

101. lite server

Step#4: Add a new config file for lite-server

 

and update as mentioned below

 

Step#5: Package the solution

 

Step#6: Start the lite-server, remember our CDN is hosted on the lite-server.

 

Step#7: Ensure that your CDN is working.

103. cdn access

So, your CDN Url would be

https://somefancycdn.whatever/hello-world-web-part_1f4d1011785284fb66303b74cee860d2.js 

 

104. cdn browser access

Step#8: Upload the package into the appcatalog

105. upload into app catalog

Step#9: Deploy the package

106. Deploy package

Step#10: Add the app

107. add app

Step#11: Add the app

108. add webpart

 

Customizing webpart:
Now lets see how to add an additional property on the webpart.

110. add property

111. default value

Run the command

109. new property

 

If you want to enable apply  button 

112. disable auto apply

 

As we now know, this is basically javascript, we can definitely use the SharePoint REST APIs.

The following webpart would  display the site contents information

 

113. display list details

Finally would suggest reading more on the following topics.

  • Typescript
  • AngularJS/React
  • Webpack
  • Tslint