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.
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
Run npm init and respond to prompts (defaults are fine)
Run the generator
Add the script tag and associated div to a script editor web part on your SharePoint site
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!