Tech Chef's Blog

In this blog we are going to know what is SharePoint Framework (SPFx), getting started by setting up development environment, writing and shipping code for SharePoint Online sites.

Introduction to SharePoint Framework

SharePoint Framework or SPFx as we know it in short, is a client side development framework provided by Microsoft which can be used to customize SharePoint with features which are not available out of the box.

SPFx can also be used to extend it’s features to Microsoft Teams meaning we can develop components in SPFx and call it in Microsoft Teams as added functionality in a separate tab.

Some important points/features to note with respect to SPFx development –

1. SPFx is a node based development framework which include using open source tools such as Node.js, npm, Yeoman, Webpack, Gulp and TypeScript.
2. SPFx works with any JavaScript framework be it React, Angular, Vue or just plain JavaScript. Most popular among these is React.
3. It supports developing components on SharePoint Online (both classic and modern sites) and SharePoint 2016 On-Premises server onwards with feature pack 2 and above.
4. SharePoint 2019 is fully compatible for SharePoint 2019 On-Premises.
5. It is a prime focus tool for developing components for modern technologies.
6. It is cross platform with respect to development platform. It can be either be Windows, Mac or Linux.
7. It does not support JavaScript injections unlike other client side development approaches we have seen since SharePoint 2010 onwards.
8. It doesn’t use iframes to render content on the page.
9. SPFx supports office UI fabric controls which are responsive in nature.
10. It does not support elevation of privileges as we have seen in earlier client side development approaches like SharePoint AddIns etc and unlike in server side or full trust code.

SPFx skills and ToolChains required

Now let us start with knowing what all skill and tools are required to get started with SharePoint Framework (SPFx) development –

TypeScript

Typescript is the official language for SPFx.

It is basically a strong typed, object oriented and compiled language which was created to overcome all the shortcomings of JavaScript.

One major benefit TypeScript provides is that it let you know of any compile time wrong syntaxes and type checking if any, which saves lot of time of developer as they are not discovered at runtime rather during design time.

Nature of TypeScript language provided easy migration of C# developers, writing server side code towards writing client side code since most of the features it supports are familiar to them for example modules and class based orientation.

To know more about TypeScript, it’s pros and cons over JavaScript you can refer to this link.

Node

Node is basically a open source cross platform JavaScript based lightweight framework, used for building highly scalable server side applications.

You can think of Node as IIS Server which was used as a web server to host various applications based on ASP.NET or PHP technologies.

Node Package Manager (npm)

Node Package Manager is a utility for managing/downloading and installing dependent packages, which are used by applications running on top of Node framework.

It is similar to NuGet package manager.

Npm packages can be installed locally or globally to the machine where you are developing SPFx solutions. If you are frequently working on SPFx solution then it is better to install packages globally.

Gulp

We would be using Gulp for building our SPFx solutions.

Gulp is open source and is built on Node, which allows developers to automate repeated/common tasks like bundling and minifying JavaScript and CSS files, compiling preprocessed CSS, reloading browser when any changes saved in code, compiling TypeScript to JavaScript etc.

Yeoman

As per Yeoman itself, it is –

“Yeoman is a generic scaffolding system allowing the creation of any kind of app. It allows for rapidly getting started on new projects and streamlines the maintenance of existing projects.”

It provides different variety of solutions to be generated for example webpart or extension or library.

Code Editor

For developing application for SPFx, any code editor is ok to use, even notepad would work but by considering popularity and convenience of plenty of plug-ins, Visual Studio Code is preferred by majority.

However choice is really up to you, which one to choose.

Alright so now we are aware of what tools and skills are required, not let us proceed towards setting up development environment for SPFx.

Setting up development environment

We will now go ahead and setup our development environment by installing components one by one –

Node.js

Node can be installed by navigating to this link here.

From the list of options, select 64 bit version of msi as shown below to download the installation file onto your hard drive –

Once it is downloaded, double click on it to follow easy installation process to install Node on your local computer.

To check if Node is successfully installed, you can invoke windows poowershell and invoke following command –

node –version

It should display as “v10.16.3”

Main thing to observe is that node version should be v10 as prefix, whatever follows after that really does not matter, in this case it is 16.3

Visual Studio Code

VS Code can be downloaded from this link.

Based on your operating system you can download relevant file, in my case it is windows so i would click on windows option for downloading the file and install it on my local machine.

Install pre-requisites

Now we be installing pre-requisites like gulp, yeoman and yeoman’s template generator for sharepoint by executing following command in windows powershell utility –

npm install -g gulp yo @microsoft/generator-sharepoint

We are installing all three in one single command and with “-g” option all of them will get install globally meaning we need not install them repeatedly for individual SPFx projects.

Installing self-signed developer certificate

We need to install self signed developer certificate in order to run SPFx solutions.

Self signed certificate allows us to run SPFx solutions under https prefix, this is particularly helpful to fix/prevent use of non https references in SPFx since they will break in production. This will ensure smooth transition of our code to production. Also files from localhost will be served on local machine and local browser will not reject them.

To install certificate we need to run below command in windows powershell –

gulp trust-dev-cert

Once your command gets executed, you get a popup for trusting the local certificate. You do that by clicking on Yes button.

That’s it, now we have our launch pad ready to write and execute some SPFx code 🙂

Now we will see how to create a hello world webpart project using SPFx.

Creating first SPFx project

Till now we had completed setup for SPFx to run, now it is time to create our very first hello world application. Here we go –

1. First we start with creating a directory by running following command in windows powershell – “md firstSPFxProject”.
2. Go inside the directory by executing command – “cd firstSPFxProject”.
3. Create a default SharePoint template from Yeoman be executing following command – “yo @microsoft/sharepoint” and hit enter.
4. Mention the details as shown below. You can give your own directory, solution and webpart names based on the requirements.
5. Below i have chosen “React” as JavaScript framework, you can choose any other if you wish.

6. On successful completion, you will see below screen –

7. You can execute command to run your SPFx solution – “Gulp Serve”.

It will open the local workbench for us to play around with the webpart –

We click on the “+” sign in the middle to add our webpart, in this case it is “HelloWorld” –

Rendered webpart looks like this –

We can also render our webpart in SharePoint online site, workbench page can be found at the the path below –

“https://{tenant}/sites/modern/_layouts/15/workbench.aspx”

Rest of the steps remains same of adding and using webpart using local workbench.

Advantage of using SharePoint site’s workbench is that our webpart can interact with SharePoint including lists and libraries without deploying it in the tenant.

Since our webpart is not yet deployed, we still need Node to run the dependent files so that it renders without any error in SharePoint online workbench.

In this case we don’t need browser window to open local workbench using Gulp serve. So we will execute Gulp serve command without opening localhost window.

We do that by executing following command –

Gulp serve –nobrowser

We have seen how to create a very simple Hello world webpart, now let us see how we can build and ship our solution to SharePoint Online.

Types of SharePoint Framework solutions

Using SPFx we can develop following types of solutions –

WebParts

Application Extensions

Libraries

Building solution

In order to build our solution, we need to run the following commands –

gulp clean

gulp build

Once our solution is ready with successful build, we need to deploy/ship our solution onto SharePoint App Catalog gallery.

App Catalog can be created at 2 locations, one at site collection level and another at tenant level.

Creating App Catalog at Site collection level.

We can create at site collection level to test whether the deployment is successful and the webparts/extensions or library we wrote in the package, are functioning well on SharePoint.

Once we verify at site collection level, we can carry same steps to deploy our package at tenant level.

Site collection level app catalog was also created to restrict SPFx components to be made available for entire tenant.

We can create app catalog at site collection level by running the following command in SharePoint Online management shell –

Connect-PnPOnline -Url https://<tenant>-admin.sharepoint.com -UseWebLogin

Add-SPOSiteCollectionAppCatalog -Site <sitecollection>

SharePoint Online Management Shell can be downloaded from here.

Creating App Catalog at tenant level

Go to SharePoint admin site url –

https://{tenant}-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/home

Click on “More features” from left navigation –

Select “Open” from “App” section from right hand side navigation –

Select “App Catalog” from Apps page –

Select “Create a new app catalog site” from the list and click on Ok.

Above step applies if you don’t have app catalog site already created, however if you want any existing app catalog site then you can select 2nd option above and give full url of the app catalog library.

For new app catalog, enter relevant details and click Ok. This will create your app catalog at tenant level.

Shipping solution

For shipping production ready solution, we need to run the following command from the root folder –

gulp clean –ship

gulp build –ship

gulp bundle –ship

gulp package-solution –ship

Bundle command will prepare the files for production level deployment like minification etc, Package solution command will create “.sppkg” extension file under SharePoint\solution folder.

Deployment to App Catalog

Once package is ready without errors, we can deploy it to app catalog. You do that by dragging and dropping it to app catalog library –

Click on “Deploy” and your app would be successfully deployed.

Adding webpart to SharePoint site

Once your package is successfully deployed to App Catalog, then you can add that app in SharePoint online page of that tenant.

Go to Site where you want it deployed, select “Add an app” then select “From your Organization” and click on app to install it on the site.

Once it is installed, it look like below –

You can add the webpart on the page by clicking edit and selecting webpart from the list of choices –

Once added you can verify it and click on “Republish” button.

That’s it, our webpart is finally deployed on production SharePoint modern site –

Thank you all for spending your precious time in reading my blog, take care of your health and have a great year ahead.

Do checkout my blog on PowerBI Introduction here.

Cheers!