Introduction to Sharepoint Framework

Introduction to Sharepoint Framework

In the past we had Sharepoint Solutions, for those of us who are old enough and started with WSS 3.0, Sharepoint 2003 or 2007, that was the only way to develop solutions at that time. We had to create our Solutions with C# code, code that created pages, webparts, lists, features, timer jobs, etc. Until the year 2012 it was the most popular way to develop against Sharepoint, but after Sharepoint 2013 Microsoft started to change its vision, Office 365 becase a very important product on the Microsoft marketplace, at that time they introduced Sharepoint Add-Ins (formerly known as Sharepoint Apps), with this development model we can create Add-In with C# but the code was hosted on another server, IIS or Azure, with the CSOM APIs we can interact with Sharepoint Data, and integrate Sharepoint with thousands of other C# APIs. With Sharepoint Hosted Add-Ins, we can only develop with javascript, the code is executed on the browser, but with REST APIs we can also interact with Sharepoint data and combine multiple javascript plugins to come up with outstanding solutions.

These 2 last pieces are still current, and will probably survive for a long time, they are very powerful and I will probably blog a lot more about these.

However since May 2016, Microsoft has announced the introduction to the Sharepoint Framework, also known as SPF, this new framework and I quote its a:

Page and Part model that enables fully supported client-side development, easy integration with the Microsoft Graph and support for open source tooling"

This new thing is so great, its Open Source, so any of you can collaborate with the github repo, and one of the things I love about it, its that Microsoft themselves are using it to build the new Sharepoint Experiences, for example the new Document Library look and feel, amongst other things they have released the last few months.

With every new tooling, there comes a challenge, a challenge to learn something new, because SPF its based on the latest open source technologies I will mention what you will need to learn:

Mandatory:
1. Typescript
2. NodeJS.
3. NPM (open source package manager, like nuget but cooler).
4. Gulp

Not Mandatory
1. React
2. Angular
3. Any other third party JS frameworks.

During the next posts, we will learn how to develop with this new webpart framework, we will build based on the previous post, so keep reading.

How to get started

STEP 1:

1. Get an office 365 developer tenant.

In order to build and deploy web parts in SharePoint during initial preview, you will need an Office 365 Developer Tenant. Note that for now, the tenant needs to be a developer tenant, not just the site collection.

If you are getting following exception when moving to workbench.aspx page, it means that you are not using dev tenant, rather first release or normal tenant: "The requested operation is part of an experimental feature that is not supported in the current environment. The requested operation is part of an experimental feature that is not supported in the current environment." Notice that some old dev tenants have been reported to have challenges with the developer preview, so we recommend to provision new dev tenant for testing.

2. Create an app catalog site.

If you are like me and have already used the Add-In model, then you should already know how to create one, if not keep reading.

Navigate to SharePoint Admin Center by typing the following URL in your browser.

Replace yourtenantprefix with your Office 365 developer tenant prefix. https://yourtenantprefix-admin.sharepoint.com

In the left sidebar, click on the apps menu item and then click on App Catalog.

Click OK button to create a new app catalog site.

In the next page, enter the following details:

Title: App Catalog

Web Site Address suffix: Type your preferred suffix for app catalog, for example: apps

Administrator: Type your username and click the resolve button to resolve the username

Click OK button to create the app catalog site.

SharePoint will now create the app catalog site and you will be able to see its progress in the SharePoint admin center

3. Create a new developer site collection.*

Navigate to SharePoint Admin Center by typing the following URL in your browser.

Replace yourtenantprefix with your Office 365 developer tenant prefix.

https://yourtenantprefix-admin.sharepoint.com

In the SharePoint ribbon, click New->Private Site Collection

In the dialog, enter the following:

Title: Type a title for your developer site collection, for example: Developer Site

Web Site Address suffix: Type a suffix for your developer site collection, for example: dev

Template Selection: Select Developer Site as the site collection template

Administrator: Type your username and click the resolve button to resolve the username

Click OK button to create the site collection.

4. Setup Document Library

In order to debug and preview SPF Webparts we need to upload the workbench.aspx page, also we need to create a new column, instructions are the following:

Create the new column

Follow the steps below to add the new field to the Documents library:

Click the gears icon on the top right and the click on Site settings to open the settings page.

Click on Site libraries and lists under the Site Administration category.

Click on Customize Documents

Now, click on Create column under Columns:

Type ClientSideApplicationId as the column name and leave other fields as they are.

Click OK button to create the column.

Then upload the workbench.aspx, latest version can be found here

5. Setup your development environment

Something cool here, now we can develop with a MAC OS, how cool is that? first time that the tools are so widely available across OS to build the new Sharepoint experiences.
These tools are not developed by Microsoft, instead Microsoft took the cool kids on the development area and integrated them into SPF for our own advantage.

a. Install NODEJS LTS (Long Term Support) version.
Download from here

b. Install NPM
Open up a command prompt and paste:

npm -g install npm@next

If you are using windows install this

npm install --global --production windows-build-tools  

b. Install VS code.
Download from here

c. Install Yeoman and gulp.
Open up CMD and execute

npm i -g yo gulp

d. Install Yeoman Sharepoint Generator.

npm i -g @microsoft/generator-sharepoint 

The tools above are open source and widely used in the community for other kind of developments, they are also widely used in the new ASP.NET CORE, so learning a little bit about them its a must.