Introducing Sharepoint Framework (SPFx) and How to Set it Up

As you are probably aware if you've been paying attention to our blog, we at Share IT absolutely ADORE SharePoint. We think that SharePoint is an amazing piece of software that can be extremely powerful in the right hands. This highly customizable web-based collaborative platform that integrates with Microsoft Office has proven to be quite useful for a great number of enterprise-level companies who are in need of optimizing complex processes and conveniently and securely distributing specific sets of data across multiple sectors.

During these last twelve months, we wrote a decent number of articles on our blog about SharePoint and its many benefits and functionalities. We wrote about why enterprise-level businesses should consider using this platform, we shared use cases, tutorials, comparisons with similar tools, beginner’s guides… Oh, the works.

Today, we would like to write about SharePoint from a different perspective. Developer’s perspective, to be exact. In this particular article, we would like to get into detail about SharePoint customization and introduce to you SPFx.

What is SPFx?

text

By definition, SPFx (short for SharePoint Framework) is a “page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling”.

At least that’s how Microsoft describes it.

In layman’s terms, SharePoint Framework is basically a model where developers can access deeper levels of SharePoint customization. This model can be used on literally any JavaScript platform where developers can change more complex parts of SharePoint to make it a better fit for the client they’re working for.

The SharePoint Framework was built with the intention to revolutionize how developers work with SP. As you know if you’ve been messing with SharePoint for a while, working on a SP project is never as easy as it should be. The platform has been changing for years now, we’ve been getting newer versions, and all of them demanded a different approach. Most of us still remember the days when we used to build Script Web Editors to customize DOMs on older SharePoint websites, but then reality reared its ugly head and we learned that this specific approach was not going to work for “non-scripted” websites.

The horror. Luckily, those days are long gone and we have SPFx to look forward to.

The Benefits of Using SPFx

As mentioned above, one of the biggest benefits here is that developers can work in a preferred environment. This model can be used on literally any JavaScript platform. One where they feel most comfortable. They can use currently popular web tech and utilities to build and customize elements of modern SharePoint pages, and create apps that take in mind the latest mobile standards (from the beginning).

Here’s a list of benefits that both Microsoft and senior SharePoint developers find to be extremely good about SPFx:

  • Total absence of iframes. SPFx operates in the user’s browser
  • SPFx enables faster rendering in the browser and normal page DOM
  • All the controls are responsive and they are rendered in the normal DOM
  • In addition to renders and configuration changes, devs can access the lifecycle of all other SharePoint Framework components
  • SPFx is framework agnostic. You can use any framework that you like. React, Angular, Knockout - anything goes
  • SPFx allows the use of open source development tools like npm, TypeScript, Yeoman, webpack and Gulp
  • SPFx works with both classic pages and modern SharePoint pages
  • Development in SPFx is safe and secure
  • Controlled visibility - with SPFx, devs can give viewing option to the webpart in the App Catalog of the site contents to anyone they like
  • Earlier knowledge of CSOM comes in handy here - the data models are not changed and everything is completely transferable
  • SPFx supports mobile views of SharePoint Online sites

Pretty sweet, right?

How to Setup the SPFx Environment?

text

There are two main ways for setting up the SPFx environment:

you can 1.) use a Virtual Studio Code; 2.) build your own custom development environment.

It’s up to you.

If you decide to go with the custom option, you need to start by installing the latest LTS version from NodeJS and then a prefered code editor. Virtual Studio Code, Atom, Webstorm - pick the one you like the most.

To help you start with setting up new projects and web parts, install the Yeoman and gulp. Then install the Yeoman generator. The generator comes with common tools, common boilerplate code, and a common playground website to host web parts. You can use all of that to create projects and test everything that you make.

After that comes updating your NPM packages.

Next, you should install a web browser like Chrome or Firefox where you can actually do some work.

Before we proceed, it’s important to mention that SPFx uses HTTPS by default. This means that self-signed SSL certificates will not be trusted in your development environment. In order to trust a certain certificate, it's mandatory that you first develop an actual environment.

The last two steps are all about selecting the right optional tools and understanding how the SharePoint Server 2016 works. As far as optional tools are concerned, people usually stick with Fiddler and Postman. And as for the server side of the story - it’s important to know that SPFx works with SharePoint Server 2016 which has a slight problem with NodeJS, HTTP, and HTTPS. You can read more about this particular issue here.

All in all, as you can see from everything written above, SPFx is a great model that’s not that difficult to set up. If this explanation wasn’t clear enough for you, you can also watch this step-by-video that Microsoft created and published on their YouTube channel:

Video Tutorial For Setting SPFx Environment Video Tutorial For Setting SPFx Environment (updated tutorial)

Over to You

Thank you for taking the time to read this post. Our goal here was to introduce SPFx to everyone who is interested in learning more about SharePoint development. As you can see from everything written above, SPFx is a great solution that enables you to easily jump into the world SharePoint development and customization. It helps you create great web parts and apps within favorable JavaScript environments.

In the future, we plan to create a guide on how to build projects in SPFx, so if you have any questions about everything we wrote here - feel free to shoot us an email at contact@shareit.rs. In case you want to inquire about a specific project, contact us using the same email address.