Front-end SharePoint projects – synced and safe!

This article is a continuation of my previous one (Preparing development machine for client-side SharePoint projects).

I had stopped on a development machine with all necessary software installed and ready for coding.

And we’re almost ready, yet, we also desire to skip some scaffolding routines, because somebody did it for us.

Have you heard about SharePoint Framework (aka SPFx)? What do they use for delivering project starting point? Yep, they use Yeoman generator. But some might say “It’s too complex for me at the point”, “I have On-Premises with no Apps configured”, “I want just edit few assets” or “My project task is MasterPage-styling-related and I can’t achieve anything from SPFx yet”.

That’s why for the period of transition from old-style to something brighter, somebody created an alternative for you. Which is simpler to use, which allows mastering Git, VSC (or any), Node.js, tasks right now in a very straightforward way for a very simple but tremendously useful thing.

Here we are. We are going to use SP Pull-n-Push Yeoman Generator. This generator creates a scaffolding project with tasks for pulling files from SharePoint library and saving changed assets to SharePoint back.

Yeoman and some other libraries should have been installed if you followed my previous post. Otherwise, just in case, the command:

npm install -g gulp bower yo  

Let’s install generator next:

npm install -g generator-sppp  

Note: SP Pull-n-Push is young, in case of issues or suggestions all the feedback is welcomed on GitHub.

On new version release Yeoman generators should be updated by running yo command in a console and selecting “Update your generators”, so you will be using fresh version while scaffolding your next assets project.

To scaffold a project you need to create (or better clone blank project from Git) and run yo command inside a project’s directory:

yo sppp [YourProjectName]  

The generator’s wizard is executed right away. The wizard asks for project related questions, where you can provide all of the parameters, SharePoint site url and credentials.

All of the parameters could be changed later on in the project.

The wizard copies files and installs NPM and Bower component if needed.

In current version of this generator there are two tasks:

1. Downloading all the files from target folder in SharePoint to local project ./src folder

This task can be useful in some cases. When we need to use existing assets as a start point and too lazy to copy them manually.

The second case is more advanced and consumes Git’s capability of detecting the changes. Imagine that some of the assets were changed and this change have been done outside the Git. That’s awful but happens. And we need to have a tool to run a task, wait a bit and see if it’s ok or if there are some potential issues.

For downloading all files from SharePoint sppull task is there.

gulp sppull-all  

And, in a while, all the files from SharePoint target are delivered to a local directory for us.

2. The second task is for more often usage. Actually, it should be running everytime we are changing assets in a local project and expecting the changes to be applied to SharePoint.

gulp watch-assets  

This task starts watching ./src folder and on any change uploads corresponding files straight to a destination. The task uses gulp-spsave module for Node.js integration with SharePoint.

A project created with the use of sppp yeoman generator could be extended with any other NPM or Bower dependencies and it could be the first step in diving to the new modern way of dealing with SharePoint and transition to SPFx.