in SharePoint, SPFx

SharePoint and Client-side development  – The common build toolchain

SharePoint at its core is a web platform. It is no surprise many developers want to or already choose to build SharePoint solutions using the JavaScript web stack. Server side development served well over a decade and is still probably the preferred model for many enterprises in the on-premises world.

With the introduction of SharePoint Framework (SPFx), SharePoint development model now supports client-side development. Developers get a highly robust and extensible client-side framework to build and deploy SharePoint customizations. On top of that, SharePoint as a product is also adopting SPFx as its core model to build new capabilities and features into the platform.

Today, SPFx is available as a developer preview in Office 365. It will also be available to SharePoint 2016 on-premises releases, targeting 2017. However, as new features and capabilities gets released, it is unfortunate to not have those features and capabilities available to all versions/releases of that product (due to various technical and product management cost/troubles/issues).

So, if you are using earlier versions of SharePoint, you might be wondering how you can make use of this client-side framework to build and deploy client-side customizations.

Well, yes and no.

One of the advantages of being client-side driven is that you can adopt similar development model and patterns to earlier versions of SharePoint as well. For example, with app script web part pattern, you are able to build and deploy a web part, both in Office 365 and on-premises, built entirely using client-side scripting. Building customizations using client-side web stack isn’t new to SharePoint developers. What’s new with SPFx is the client-side framework that allows developers to build customizations in a more consistent and supported manner by providing the key extension points in SharePoint.

One of the key things that drives client-side framework is the build toolchain. This toolchain allows developers to use a powerful combination of build tools to compile and generate JavaScript modules that you can then deploy to SharePoint. To be specific it uses the following:

  • Webpack
  • TypeScript
  • SCSS
  • Node

As you might have guessed, you can use this build toolchain in any web project. That is exactly where I am going.

The SPFx toolchain uses a set of open source npm packages to achieve this and thus opening the options to use these in any web project, including the client-side customizations you are building with SharePoint.

Just think about this a moment. The build pipeline is open, extensible and can be used in any web project, not just SPFx projects. 

SharePoint PnP published a post on this topic — Using modern web stack with SharePoint on-premises deployments — which I would recommend everyone interested in this topic to read and watch the webcast as well as it shows how to use this toolchain to build a generic react web app.

The generic react web app used in the SharePoint PnP webcast is available here for you to play with.

First step is to get to know these toolchain packages. Below are the list of those common build toolchain packages. A big advantage I see is that these packages are divided into different small npm packages (rather than one big package) and helps to pick and choose what you want.

This should give you a good picture of the web stack used and how similar they are when you compare building SPFx client-side solutions.

In the next set of posts, we will go through in building a web project using these build tools.

Write a Comment