SharePoint template

SharePoint Classic template using React, Flux, PnPjs, TypeScript, Sass, WebPack, Jest (test), Istanbul (code coverage) and PnP PowerShell for deployment. Working on SP Online and 2016. The project also includes a SP authentication proxy. IE 10+ compatible.

Setup steps

1. Setup Proxy

npm run proxy

2. Set _spPageContextInfo-object in default.html

var _spPageContextInfo = {};
    _spPageContextInfo.serverRequestPath = "/sites/[SITE_NAME]/pages/welcome.aspx";
    _spPageContextInfo.siteAbsoluteUrl = "https://[TENANT].sharepoint.com/sites/[SITE_NAME]";
    _spPageContextInfo.siteServerRelativeUrl = "/sites/[SITE_NAME]";
    _spPageContextInfo.webServerRelativeUrl = "/sites/[SITE_NAME]";
    _spPageContextInfo.webTitle = "Test";
    ...

Build

Compile scripts and style, and create deployment folder.

npm run build

Develop

Starts the proxy for local development.

npm run serve

Test/Lint

Execute tests and lint.

npm run test  
jest --c ./config/Jest/jest.config.json --no-cache --watch
npm run lint  

Requirements

The tenant need to have the following scripts running:

• @proactive-as/pnp.vendor
• core-js

npm i @proactive-as/pnp.vendor
npm i core-js

Setup example using PnP PowerShell:

$webUrl = (Get-PnPWeb).ServerRelativeUrl.TrimEnd('/')

# Add PnP JS
$coreJSUrl = $webUrl + "/Style Library/Plesner/Scripts/core.min.js"
$pnpJSUrl = $webUrl + "/Style Library/Plesner/Scripts/pnp.vendor.js"
# Only for on prem 2016 without React
$reactJSurl = $webUrl + "/Style Library/Plesner/Scripts/react.production.min.js"
$reactDomJSurl = $webUrl + "/Style Library/Plesner/Scripts/react-dom.production.min.js"
$scriptBlock = "
                SP.SOD.registerSod('core.min.js', '$coreJSUrl');
                SP.SOD.registerSod('pnp.vendor.js', '$pnpJSUrl');
                SP.SOD.registerSod('react.production.min.js', '$reactJSurl');
                SP.SOD.registerSod('react-dom.production.min.js', '$reactDomJSurl');
                RegisterSodDep('react.production.min.js', 'core.min.js');
                RegisterSodDep('react-dom.production.min.js', 'react.production.min.js');
                RegisterSodDep('pnp.vendor.js', 'react-dom.production.min.js');
                SP.SOD.loadMultiple(['react-dom.production.min.js', 'react.production.min.js', 'pnp.vendor.js', 'core.min.js'], function(){
                });
                "

Add-PnPJavaScriptBlock -Name "Vendor scripts" -script $scriptBlock -Sequence 1000 -Scope Site