PnP JS Core Debug

Allows debugging local sources of PnP JS Core right in TypeScript with live requests to SharePoint environment in Node.js.

Prerequisites

• Node.js
• TypeScript
• TSLint
• Gulp

Install Node.js global modules

npm install typescript tslint ts-node gulp -g

Fork projects

• PnP JS Core
• PnP JS Core Debug

Clone forks

Projects' folders should be located in the same root folder.

git clone https://github.com/[namespace]/PnP-JS-Core
git clone https://github.com/[namespace]/PnP-JS-Core-Debug

[namespace] stands for you or your company GitHub account.

Install dependencies

Dependencies should be restored in both projects' folders:

npm install

or

yarn install

VS Code is our editor of choise

Open both projects in VS Code. Workspaces are the best option here.

Upstream for PnP JS Core

Add upstream for PnP JS Core (one-time operation). In PnP JS Core's folder:

git remote add upstream https://github.com/SharePoint/PnP-JS-Core

This will allow syncing your repository sources with main repo with:

git pull upstream dev

Feature branch

It's recommended using feature branches for code changes related to a specific feature or bug fix.

Before creating a feature branch make sure:

• A feature branch is based on PnP JS Core dev branch.
• The local branch is synced with remote upstream branch (this can be done with feature branch too).

git checkout dev
git fetch upstream dev
git checkout -b [name_of_your_new_branch]

It's better to prefix feature branch with dev-.

Connecting tools with SharePoint

On first run SharePoint environment connection should be initiated:

Run npm task

npm run init

You'll be prompted with SharePoint web URL and credentials, just follow the wizard:

Read more about supported auth scenarios.

Configuration files

Connection is saved to config files which are better to exclude from a git repository. By default config path is ./config/private.json. Passwords in configs are stored in an encrypted way.

Config sample:

{
  "siteUrl": "https://contoso.sharepoint.com/sites/dev-a",
  "strategy": "UserCredentials",
  "username": "[email protected]",
  "password": "bcccd4e6025...ZH+ZY5X2A=="
}

Making changes

Now you can apply changes to PnP JS Core project sources (your local copy). Follow Getting Started: Contribute wiki page's instructions.

Debugging with PnP JS Core Debug

In PnP-JS-Core-Debug/runners project's folder create a .ts file.

Wrap file with:

import { Web } from './../../PnP-JS-Core/src/pnp';
import { initEnvironment as init } from './../utils/pnpnode';
import './../utils/setup';

init().then(async settings => {

  let web = new Web(settings.siteUrl);
  // executing methods to test

}).catch(console.log);

Place debug break points in PnP JS Core .ts sources or your custom code. Open a runner which executes logic to test and start a debugger for the current file.

Now all the power of VS Code debugger is our oyster!