LogoLogo
  • Introduction
  • Our Packages
    • sp-rest-proxy
    • node-sp-auth-config
    • generator-sppp
    • sp-build-tasks
    • sp-pnp-node
    • sp-jsom-node
    • sppull
    • sp-download
    • sppurge
    • sp-live-reload
    • sp-screwdriver
    • cpass
Powered by GitBook
On this page
  • Development scenarious
  • Supported SharePoint versions
  • How to use
  • Tasks detail information
  • Build configuration details
  • SharePoint communication layer
  • Configuring CI/CD
  • License

Was this helpful?

  1. Our Packages

generator-sppp

🐾 SP Pull-n-Push - Yeoman generator for SharePoint client-side applications

Previousnode-sp-auth-configNextsp-build-tasks

Last updated 5 years ago

Was this helpful?

Yeoman generator for SharePoint - lets you quickly set up a project with sensible defaults for pulling and pushing files between SharePoint asset library and local projects sources.

Generated project allows immediately start developing SharePoint client-side solutions in Visual Studio Code or any other editor with instant publishing changes to SharePoint web site and downloading specific assets from SP Document library folder to local project assets which can be enforced with Git Diff algorithm for tracking changes.

SPPP generated projects suite perfectly for SPA development scenarious having local serve workbench with SharePoint API proxy server intergated from OOTB. Starting a local server your app refreshes instantly on changes using hot reload and incremental build at the same time the app is fully powered with real data from the API without any extra configuration.

React, PnPjs, Office UI Fabric, TypeScript, SCSS, Linting rules, polyfills, Webpack bundling, Live server, SharePoint interactive connection, , all of these just work from the start. The batteries are included, but maybe you need congifuration changes? No problem, just override or provide yours, or extend a task, this is a part of the design.

Don't need React or Office UI Fabric? Don't worry, these guys are installed as a presets only when you decided to.

Development scenarious

  • Webparts developement

    • classic CEWPs

    • SPA applications

  • Branding

    • masterpages

    • page layouts development

  • Custom actions (ScriptLink User Custom Action)

  • Custom scripts and portal libraries

  • Custom styles

  • Direct edit assets with Git backup (like in SPD days, or but using CLI)

Supported SharePoint versions

  • SharePoint Online

  • SharePoint On-Prem (2019/2016/2013)

  • SharePoint 2010 (limited support)

How to use

Using NPX (without Yeoman and generator global installation)

Create and navigane to project folder then run:

npx -p yo -p generator-sppp -c 'yo sppp'

NPM v6 is required.

Global install (classic approach)

Install

Alter Node.js and NPM are staffed, install Gulp, Yeoman and generator-sppp globally in your Node.js environment.

npm install -g gulp-cli yo generator-sppp

gulp-cli global installation can be omitted while using NPM tasks.

Generate

Make a new directory or clone a blank Git project of your own and navigate to the created folder.

Inside project directory execulte:

yo sppp

Then follow the the Yeoman wizard instructions:

Package managers switch

With --package-manager (or --pm), a package manager can be selected. Possible managers are: pnpm, yarm and npm. npm is used by default and also as a fallback option.

Use yarn:

yo sppp --pm yarn

Use pnpm:

yo sppp --pm pnpm

Define connection with SharePoint

npm run connect

Dev Server & API Proxy

npm run start

Sync with SharePoint

gulp pull

It will deliver all files from assets folder from SharePoint to local directory.

Run npm watch task before starting editing files:

npm run watch

For publishing files from ./dist folder the publish task can be used:

npm run publish

Additional Gulp tasks

Available tasks list:

gulp --tasks

Watch changes of the assets with live reload

gulp live

Tasks detail information

Build configuration details

SharePoint communication layer

Configuring CI/CD

License

To use Yeoman, one need to has Node.js and NPM installed on the computer. Basic installation process description can be found in .

Generator in action
Connect with SharePoint
Dev Server

Now you can run gulp task:

SPPull in action

On files change they are uploaded and published to SharePoint with use of .

Check more information.

Please check a reference in .

SPPP is powered with sp-build-tasks, build configs can be found in a of the project.

app.json settings

library is used for downloading files from SharePoint

library is used for saving files to SharePoint

and are in charge for low level communication with SharePoint

library is used for instantaneous page reload

authentication config wizard

build tasks tool-belt

Communication layer settings are stored in ./config/private.json, parameters settings description can be found .

Checkout .

this blog post
sppull
gulp-spsave
sp-live-reload project page
this wiki page
wiki section
sppull
gulp-spsave
sp-request
node-sp-auth
sp-live-reload
node-so-auth-config
sp-build-tasks
here
this end-to-end sample
pipeline tasks
SPGo
NPM
npm version
Build Status
Downloads
FOSSA Status
Gitter chat
FOSSA Status