This is the third part of my posts about SharePoint client side development using Node.js.
You can see previous parts from here:
- Setting up HTTPS certificates: http://salomaa.info/sharepoint/setting-up-https-certificates/
During this post I will guide you how to create self-signed certificates for HTTPS connections. - Getting ready for SharePoint development using node.js: http://salomaa.info/sharepoint/getting-ready-for-sharepoint-development-using-node-js/
During this post I will guide you how to setup Node.js and create simple project.
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
npm install --save-dev gulp-serve
Copy files from existing project
We have already created working gulpfile in our previous project so we can reuse those in this also.
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
Typings
npm install typings --save-dev
Sp-pnp-js
npm install sp-pnp-js –save-dev
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.
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
Open Visual Studio code
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");
});
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">
<script type="text/javascript" src="https://dev.sharepoint.local/scripts/jquery.min.js"></script><br />
<script type="text/javascript" src="https://dev.sharepoint.local/scripts/pnp.min.js"></script><br />
<script type="text/javascript" src="https://dev.sharepoint.local/scripts/app.js"></script><br />
<link rel="stylesheet" type="text/css" href="https://dev.sharepoint.local/styles/app.css" /><br />
<div id="pnp-test-bench"></div><br />
</p>
</div>
</body>
</html>
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'));
});
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
Now we can start our test bench
gulp serve-https
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.
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
Pingback: Develop on SharePoint 2013 On Premise with TypeScript and Visual Studio Code (on a Mac) | Let's Rock with Azure !