Getting Started With SharePoint Framework
Getting Started With SharePoint Framework
The SharePoint Framework offers lightweight tooling to simplify client-side development on SharePoint. Learn how to get started.
Join the DZone community and get the full member experience.Join For Free
The new Gartner Critical Capabilities report explains how APIs and microservices enable digital leaders to deliver better B2B, open banking and mobile projects.
I started learning the SharePoint Framework (SPFx) to get better at client-side development for Office 365. I decided to go with SharePoint Framework as it has simple lightweight tooling available and also because it is well documented. This blog post is a short and practical introduction to SPFx and briefly summarizes everything important you need to know to get your first client-side web part up and running.
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.
Here is the tooling you need to get started with a sample client-side web part.
- Gulp and Yeoman
- Visual Studio Code
- 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.
- Reply to all the questions that the Yeoman generator asks.
- Run Visual Studio code from this folder.
I created a React.js based client-side web part. This is how it looks 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.
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:
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).
Published at DZone with permission of Gunnar Peipman , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.