Home

Quick start

Prerequisites

• Node.js (v6 or higher)
• Git Client - version control, optional, but highly recommended
• Yeoman - scaffolding engine
• TypeScript - surepset of JavaScript
• Webpack - build/bundling tool
• Gulp - tasks manager
• TSLint - code style analysis
• Yarn - alternative package manager client, optional
• generator-sppp - SharePoint front-ent projects generator

Install Node.js

Check installation:

node -v

npm -v

Should return versions numbers.

Install global dependencies

npm i yo generator-sppp typescript tslint yarn webpack gulp -g

Project creation

In a console:

1. Create a project folder

2. Navigate to the folder

mkdir my-project && cd my-project

3. Init git [optional]

git init

4. Run generator

yo sppp

5. Follow generator wizard instructions

Project scaffolders should be created, all necessary dependencies installed.

6. Init connection with SharePoint

gulp config

Follow auth wizard prompts. More about auth options.

Supports SharePoint 2016, 2013, SPO.

7. Run watch task

gulp watch

The task watches for changes and uploads to SharePoint.

8. Can start development now

Development parts

Scripts

./src/scripts TypeScript and ES6 can be written here. The default entry script is ./src/scripts/index.ts. [Can be redefined].

Styles

./src/styles SASS (.scss) can be written here. The default entry style is ./src/styles/index.scss. [Can be redefined].

Webparts

./src/webparts CEWP in .hbs (compiled to .html) format can be written here.

Masterpages

./src/masterpage MasterPage in .hbs (compiled to .html) fromat can be developed here.

Layouts

./src/masterpage/layouts publishing pages layouts in .hbs (compiled to .html) fromat can be developed here.

Build configuration

A variety of options can be configured in ./config/app.json. See more settigns.

Build tasks

List of tasks.

Popular tasks:

Compile sources to distribution files

gulp build

Publish distribution files to SharePoint

gulp push

Dev mode watching assets

gulp watch

Questions

1. Rise an issue in related projects or

2. Join the chat on Gitter