In this post, we are going to investigate the Pnp-js library from the SharePoint Patterns and Practices group by building a simple list viewer. We will continue to build on this simple application as we tackle more and more of the PnP-JS library functionality. In this initial post we will look at configuring the library and building a simple application that will display all the lists and libraries as well as their fields.
To keep things simple, we are going to keep all of our code in two files. One file is going to be the base for our HTML and will be placed in a Script Editor Web Part. The other will be our script file and will handle the configuration of PnP-JS and our custom code.
First things first download the latest release of the PnP-JS library from the following URL https://github.com/SharePoint/PnP-JS-Core and jQuery from https://jquery.com/. Go ahead and upload both files to your Site Assets library.
Now we can set up and configure the PnP-JS library. Inside the self-executing function place the following configuration code. Without this configuration the library will not function correctly. This will set up our Accept header for the rest calls and force JSON to be returned instead of XML.
Now that the PnP-JS configuration is done we can start utilizing the library to query SharePoint.