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.
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.
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.
Here’s a list of benefits that both Microsoft and senior SharePoint developers find to be extremely good about SPFx:
Pretty sweet, right?
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:
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 firstname.lastname@example.org. In case you want to inquire about a specific project, contact us using the same email address.