Creating a PnP-JS-Core Workbench

This is the third part of my posts about SharePoint client side development using Node.js.

You can see previous parts from here:

During this post we will load Office PnP client side scripts and create simple workbench to test our applications in SharePoint.

Setting up project

Create project

The first this is to create a new project. It’s called PnPTestBench. I have covered these steps more detailed in part 2 so I will just show commands and end result here.

Open Node.js Command Prompt

cd \Source
md PnPTestBench
cd PnPTestBench
npm init

name: pnptestbench
version: (Accept default value)
description: PnP-JS-Core Test Bench
entry point: (Accept default value)
test command:
git repository:
keywords:
author: (Enter your name)
license: (Accept default value)

npm install --save-dev gulp

WebStack_GulpLocalInstall

npm install --save-dev gulp-serve

PnPTestBench_GulpServeInstall

Copy files from existing project

We have already created working gulpfile in our previous project so we can reuse those in this also.

PnPTestBench_CopyFilesSource

PnPTestBench_CopyFilesTarget

Copy gulpfile.js, dev_sharepoint_local.crt and dev_sharepoint_local.key from MyFirstProject folder to PnPTestBench folder.

Add required scripts

Office PnP scripts can be loaded as npm package manager. If you are not familiar with Office PnP, you can go to see more information from their GitHub project page. https://github.com/OfficeDev/PnP-JS-Core

jQuery

npm install jquery --save-dev

PnPTestBench_JQueryInstall

Typings

npm install typings --save-dev

PnPTestBench_TypingsInstall

Sp-pnp-js

npm install sp-pnp-js –save-dev

PnPTestBench_SpPnPInstallSuccess

If you will get following error message “’typings’ is not recognized as an internal or external command and “Failed at the sp-pnp-js@x.x.x postinstall script ‘typings install’.”, you didn’t install typings package before installing sp-pnp-js package.

PnPTestBench_SpPnPInstallFails

Building test bench

Creating folders

Now we have installed required packages to get our project working.

We need to create a new folder called app and couple sub folders for it. This is because gulpfile.js contains reference to it.

md app
md app\scripts
md app\styles

PnPTestBench_CreateAppFolders

Open Visual Studio code

PnPTestBench_OpenVSCode

Creating files

Now we can create one html, style sheet and JavaScript file with following content.

app.css

(This is empty file)

app.js

var testbench = testbench || {};
testbench.tests = function() {
   var targetElement = jQuery("#pnp-test-bench");
   targetElement.empty();

   writeGreeting = function(name) {
      targetElement.append("<h2>Test: writeGreeting</h2>");
      targetElement.append("Hello " + name + "<br />");
   };
   return {
      writeGreeting: writeGreeting
   }
};

jQuery('document').ready(function(){
   var t = new testbench.tests();
   t.writeGreeting("Jani");
});

PnPTestBench_AppJs

index.html

<html>
<head>
<title>SharePoint PnP test bench</title>
<style>
body {
   font-family: Verdana, Geneva, sans-serif;
}
.example {
   margin: 10px;
}
.example .code {
   border: 1px solid lightgray;
   padding: 10px;
   font-family: "Lucida Console", Monaco, monospace;
}
</style>
</head>

<body>
<h1>SharePoint PnP test bench</h1>
<div class="example">
<p>Copy following code to your SharePoint site:</p>
<p class="code">
&lt;script type="text/javascript" src="https://dev.sharepoint.local/scripts/jquery.min.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript" src="https://dev.sharepoint.local/scripts/pnp.min.js"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript" src="https://dev.sharepoint.local/scripts/app.js"&gt;&lt;/script&gt;<br />
&lt;link rel="stylesheet" type="text/css" href="https://dev.sharepoint.local/styles/app.css" /&gt;<br />
&lt;div id="pnp-test-bench"&gt;&lt;/div&gt;<br />
</p>
</div>
</body>
</html>

PnPTestBench_IndexHtml

Copying library files

But wait… What about pnp javascript file. It’s located in node_modules\sp-pnp-js\dist sub folder, but we are not serving that folder. It doesn’t make sense to serve content from every single library folder. It makes the testing of the application much harder.

We can use Gulp to copy library file from its original location to app\scripts folder.

Open gulpfile.js and add following content to it.

gulp.task('copy-files', function() {
   gulp.src('./node_modules/jquery/dist/jquery.min.js').pipe(gulp.dest('./app/scripts'));
   gulp.src('./node_modules/sp-pnp-js/dist/pnp.min.js').pipe(gulp.dest('./app/scripts'));
});

PnPTestBench_GulpFileJs

Because we don’t modify these files that often, we can copy library files to scripts folder when we add new library files. This is done by executing following command in Node.js Command Prompt.

gulp copy-files

PnPTestBench_GulpCopyFiles

Now we can start our test bench

gulp serve-https

PnPTestBench_GulpServeHttps

Then we need to copy html from the example code block to SharePoint test page. If you are unsure how to do this, check instructions from Getting ready for SharePoint development using node.js: http://salomaa.info/sharepoint/getting-ready-for-sharepoint-development-using-node-js/ posting.

PnPTestBench_Browser

Our test bench works fine. Now we can continue working with it. I have created few test cases that use Office PnP JavaScript Core. I will

One thought on “Creating a PnP-JS-Core Workbench

  1. Pingback: Develop on SharePoint 2013 On Premise with TypeScript and Visual Studio Code (on a Mac) | Let's Rock with Azure !

Leave a Reply

Your email address will not be published. Required fields are marked *