Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Started With SharePoint Framework

DZone's Guide to

Getting Started With SharePoint Framework

The SharePoint Framework offers lightweight tooling to simplify client-side development on SharePoint. Learn how to get started.

· Integration Zone ·
Free Resource

The new Gartner Critical Capabilities report explains how APIs and microservices enable digital leaders to deliver better B2B, open banking and mobile projects.

What Is the SharePoint Framework?

SharePoint Framework is the newest initiative by Microsoft to simplify client-side development on SharePoint. From the SPFx site: "SharePoint Framework, a Page and Part model, enables fully supported client-side development for building SharePoint experiences, easy integration with the SharePoint data and support for open source tooling development. We designed the SharePoint Framework to empower SharePoint developers both inside and outside Microsoft. Our engineers are building modern SharePoint experiences using the SharePoint Framework. You can use the same technology, tools, and techniques we use to build more productive experiences and apps that are responsive and mobile-ready from day one."

SPFx is framework agnostic and it doesn’t need iframes to run. This means that we can use already loaded scripts and CSS-rules instead of loading them inside iframes again.

Tools

Here is the tooling you need to get started with a sample client-side web part.

  • NodeJS
  • Gulp and Yeoman
  • Visual Studio Code
  • Chrome
  • Chrome debugging extension for Visual Studio Code

You also need a SharePoint subscription available (I’m developing mostly for Office 365 SharePoint these days).

Creating a hello-world Web Part

To get started with your first client-side web part, go through the following steps:

  • Open the command line and move to the directory where you want to create the client-side web part project.
  •  md helloworld-webpart 
  •  cd helloworld-webpart 
  •  yo @microsoft/sharepoint 
  • Reply to all the questions that the Yeoman generator asks.
  • Run Visual Studio code from this folder.

SPFx: yoman generator for client-side web part

I created a React.js based client-side web part. This is how it looks in Visual Studio Code:

SPFx client-side web part in Visual Studio Code
Client-side web part opened in Visual Studio Code.

I won’t cover all the configuration possibilities and the whole project structure here, but as you can see, you need some skills in TypeScript as it helps you to avoid different type related errors and keep writing a kind of object-oriented code.

Building the Client-Side Web Part

There are three ways to build client-side web parts, as shown in the following image.

SPFx: Development models

In brief, you have the following options:

  • Workbench – this option is to test and build the visual side of the web part, as the SharePoint environment is not available with it. Of course, you can publish Workbench to the SharePoint site and use it there, also.
  • Gulp & SharePoint – the client-side web part is installed to a SharePoint site, but related scripts are loaded from the local development server (running on Gulp). This is the best option to debug scripts.
  • SharePoint and CDN – the client-side web part is deployed to SharePoint and scripts are deployed to the Azure blob storage of Office CDN. With this option, there is no local debugging possible and you have to rely on browser tools only.

NB! With current tooling, CDN doesn’t necessarily mean that Azure CDN service is needed. It’s possible to use Azure blob storage for scripts without Azure CDN. Read more about Azure deployment from this SPFx document: Deploy your SharePoint client-side web part to a CDN.

Which model is best for you depends on the situation, but I am sure that you do most of your scripting work using the second option.

This is how our sample client-side web part looks like when running on Workbench:

SPFx: Client-side web part on SharePoint workbench

If you look at the source of this page, you will see that there are no iframes – the web part is rendered to the same page.

Important Gulp Commands

The most important commands when working with Gulp are here:

  • gulp serve – runs a local gulp server and opens the Workbench page.
  • gulp serve -nobrowse – runs a local gulp server but doesn’t open the browser.
  • gulp package-solution – builds and packages the web part for deployment to SharePoint using local URLs for scripts.
  • gulp package-solution – ships, builds, and packages the web part for deployment to SharePoint and CDN.
  • gulp deploy-azure-storage – deploys scripts to Azure blob storage (the configuration is in the file config/deploy-azure-storage.json).

If you need to upload the web part to SharePoint, then package the solution and take the package from the folder sharepoint/solution. The package is named by your project by default and it has a .sppkg extension.

You can run these commands in the Visual Studio Code terminal window (select View from the top menu and then Integrated Terminal).

Wrapping Up

If you are new to JavaScript for SharePoint and Visual Studio Code tooling, then just take a few days to get familiar with all the pieces in the puzzle. It seems like too much at first, but it is actually way easier than it seems. The tooling is stable and it is very well documented by Microsoft. You can start from the SPFx document Build your first SharePoint client-side web part and then move to the next document where the example continues. I had also no issues when deploying the web part to SharePoint. As SPFx comes with many benefits and the tooling is already stable, it’s time to dig deeper and start learning it.

The new Gartner Critical Capabilities for Full Lifecycle API Management report shows how CA Technologies helps digital leaders with their B2B, open banking, and mobile initiatives. Get your copy from CA Technologies.

Topics:
sharepoint ,tutorial ,integration ,client side

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}