PnP JSCore Yeoman Template

Along with the release of the JS Core library this week we have released a simple starter template built using a Yeoman generator. You can think of Yeoman as the "file -> new project" for open source projects, it scaffolds out a set of files from which you can then build your project. This generator will setup a simple project and allow you to begin writing code in TypeScript that you can actually deploy to your environment and use. To install the generator you can follow these steps, which are also outlined on the GitHub readme.
 

Getting Started

 

Ensure you have Yeoman installed

npm install -g yo

Install typings, if you have not previously

npm install -g typings

Install the Yeoman Generator, which is an npm module

npm install -g generator-sp-pnp-js-sample

Create a directory where you want to load the template

mkdir samples cd samples

Run npm init and respond to prompts (defaults are fine)

npm init

Run the generator

yo sp-pnp-js-sample

Add the script tag and associated div to a script editor web part on your SharePoint site

<script type="text/javascript" src="https://localhost:8080/bundle/example-bundle.js" data-divid="pnp-sample-container"></script> <div id="pnp-sample-container"></div>

Start Coding

Included in the template's gulp file are several commands, the first we'll use is "gulp serve" which will start an in memory web server you can use to test your work while you develop. The files are being watched so that each time you change a file the bundle will be re-built and you can quickly refresh and see your changes. Go ahead and type gulp serve once you have the script tag in place and refresh the page. You should see the hello world example text appear.

You can also uncomment the other two SharePoint examples to see other features of the library, or begin building your own app. You can include other modules (we've added jquery for you) using npm and import them into your project, React, Knockout, or Angular are good candidates - or use your favorite frameworks.

Once you've built and tested your application you're ready to deploy. Use the "gulp build" command which will use webpack to create a single minified app.js file containing all your source code as well as references such as jquery and the pnp jscore. Webpack has many capabilities and can be configured to keep modules external, break your application into chunks amongst many other capabilities. We've used a very simple configuration to get you started, but feel free to make any changes you like - it's your project now!

Comments

• Anonymous
  July 18, 2016
  The file hosted by WebPack is at: http://localhost:8080/assets/app.js
• Anonymous
  February 21, 2017
  I see that this will bring a version 1.0.0 of sp-pnp-js. Any plans to update the generator to use the latest version?
  • Anonymous
    February 21, 2017
    None at this time, but something I can take a look at. There wasn't much interest in this generator initially so I haven't been maintaining it.