Quick Guide To Setup Your SharePoint Framework Development Environment using PNP JS

This is the article to helps you to understand the usage of new concept introduced by Microsoft community
and it is named as pattern and practices.(PNP). The PnP JS Core Library was created to help developers
by simplifying common operations (CRUD) within SharePoint and the SharePoint Framework.
PnP-JS-Core is a part of Office 365 Developer Patterns and Components for JavaScript’ing in SharePoint.
At this time  it contains a fluent API for working with the full SharePoint REST API as well as utility and helper
Purpose of the article is help you to understand basic operations to use new PnP Js core library effectively
and this article describes completing basic operations using the JS core library.
And follow the below steps to configure SharePoint environment  if your going with typescript model.
For SharePoint Framework development (PNP JS), I uses Visual Studio code  editor in the steps and examples.
Because Visual Studio Code editor IDE is a lightweight but powerful source code editor from Microsoft that runs
on your desktop and is available for Windows, Mac, and Linux.
Another thing that I think is great, and which I am really glad to see happening, is the adoption ofTypeScript.
It is a typed superset of JavaScript, which transpiles into plain JS so it can be understood by any browser.
I am going to post all examples are in Typescript and If you are using the library directly in SharePoint page
Content Editor Web part by JavaScript they will all still work, with a few modifications.
Before we start looking into the code section we need to complete some necessary steps to follow up for an
environment setup.
  1. Install NodeJS

  2. IDE for  client-side development
  3. Yeoman and Gulp Installation

Node JS installation:
The current supported LTS version of NodeJS for the SharePoint Framework is 8.x and can be downloaded f
rom Notice that 9.x or 10.x versions are currently not supported
with SharePoint Framework development.
Click on this link NodeJS LTS version and install the NodeJS solution on your machine.
Screen Clipping
IDE Visual Studio Install
We must a need a  code editor for updating and packaging our code, so kindly
install Visual Studio Code on your local machine.
Screen Clipping
Install Yeoman and gulp
Enter the following command to install Yeoman and gulp:

npm install -g yo gulp
After  the execution is completed, run the following code to install the SharePoint Framework
Yeoman generator globally .
npm install -g @microsoft/generator-sharepoint

Screen Clipping

Trusting the self-signed developer certificate

The SharePoint Framework's local webserver, used when testing your custom solutions from your
development environment, uses HTTPS by default. This is implemented using a development self-signed
SSL certificate.
You must first configure your development environment to trust the certificate.
gulp trust-dev-cert

Benefits of Using SP-PnP-JS
  • Intellisense & TypeChecking
  • Simplify development experience
  • Intuitive using fluent library
  • Easier to read code intent
  • Asynchronous, built on Promises
  • Built-in caching
  • Abstracts devs from low level details
Install pnp library
 Here we will install the most frequently used packages. This step applies to any environment or project.
Open the command prompt and enter the following code to install the libraries.
npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp
@pnp/graph –save
The below is a very simple example to import libraries rom npm into your project folder.
import pnp from "sp-pnp-js";

Basic operations:
This below snippets will help us to getting items from a SharePoint list using pnp js core library  
and this is made easy through the library and the following examples demonstrate these actions.

To get all items from a list using pnp js core library.
import pnp from "sp-pnp-js";

pnp.sp.web.lists.getByTitle("Custom List").items.get().then((items: any[]) => {

Another example help you to understand update the items into  SharePoint list
import { default as pnp, ItemAddResult } from "sp-pnp-js";

// add an item to the list
pnp.sp.web.lists.getByTitle("Custom List").items.add({
   Title: "Title_demo",
   Description: "CustomDescription"
}).then((itemresult: ItemAddResult) => {

Delete is as simple as calling the .delete method.
import pnp from "sp-pnp-js";

let list = pnp.sp.web.lists.getByTitle("CustomList");

list.items.getById(5).delete().then(_ => {});

Thanks for your learning and let me know any changes  in the content .your feedback will help others.


Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment