Announcing gulp-spsync - A Gulp plugin that syncs local files with a SharePoint site

Tags: Visual Studio Code, Gulp, SharePoint Online

I have to admit it I have succumbed to Visual Studio Code and now also Gulp tasks, well almost at least. I was working the other day with some display templates and page layouts and needed a more efficient way than uploading the files to SharePoint Online. Open with Explorer could have worked, but since I used a customers Office 365 tenant I did not want to store credentials and do all the required voodoo to get that to work. Instead I decided to explore Gulp and see if I could automate this, and the result is a Gulp plugin called gulp-spsync.

You can find gulp-spsync in this Github repo: https://github.com/wictorwilen/gulp-spsync 

For you who have not used Gulp, the short description is that it is a task runner that runs tasks on command or at build. In this case it will copy local files to a SharePoint site.

This is how gulp-spsync looks like in practice in Visual Studio Code. As soon as I edit one of my files and saves it, the file will be uploaded to SharePoint. In the sample below it is a Display Template html file, once saved it will be uploaded, and then in SharePoint converted to the .js correspondent file.

image

To use this you need a copy of Visual Studio Code and full access to a SharePoint Online Site Collection. How to configure it all is documented in the repo, so I will not rehash it. But the basic outline is that you open up a folder on your local machine. Create a folder in that one where you create sub folders representing the sites libraries and catalogs. Then comes the tricky part, this task requires that you register an App in the Site Collection and give that App permissions. Once you have the App details you install the gulp-spsync plugin and then configure Gulp. All that then is left is to start working with your files.

I hope more people than me get some use of this one and any feedback is welcome.

8 Comments

  • marco said

    Hi,
    that sounds interesting. I have already created an alternative solution (https://github.com/mwiedemeyer/SPDeployment) which is a command line tool which can be configured with a json file. It works against OnPrem and Office365 with an account.

    marco

  • Sergei Sergeev said

    Hi,

    I've also created alternative in the past called gulp-spsave - https://github.com/s-KaiNet/gulp-spsave

    It doesn't require app with full control but uses user credentials instead. Works in SharePoint online and on-prem. Also it has one big advantage, that it can preserve folder structure from your project into fodler or document library in SharePoint. For example file MyProject\App\controllers\appctrl.js can be uploaded to the library MyAssets\App\controllers\appctrl.js (App\controllers will be created automatically) . This behavior is controlled by "flatten" option.

  • Wictor said

    @marco - thanks for the information.

    @sergei - thanks for the information. I'd rather not store my username/password in a config file.

  • Sergei said

    @wictor - for sensitive things you can create separate file and require it in the gulpfile.js. This separate file will never be committed to the source control and will be private for every developer.

  • Dustin Miller said

    You could also just use environment variables. I know they're a bit awkward to manage on Windows (they're dead simple on Mac/Linux) but it keeps secrets out of code, and that's a Good Thing(tm). In node, you'd just access them with process.env.VARIABLE_NAME_HERE

    (using all caps just 'cuz it's common for them to be in all caps, not yelling about variable names and where they go, heh)

  • Stefan Bauer said

    Hi Wictor,

    great post and it is pretty useful for some resource such as display template.

    Through the use of Yeoman generator I can directly embed most development resource such as CSS and JavaScript directly into SharePoint. Copy those resource therefor is not required.
    The local web server provides all the required files like loading files from my own private CDN.

    I wrote a blog post about this topic a while ago:
    http://www.n8d.at/blog/how-to-use-css-and-javascript-files-from-yeoman-directly-in-sharepoint/

    Greetings
    Stefan

  • Bernado Nguyen-Hoan said

    Nice work Wictor!

    I have also developed an extension (SPClientSideDeployment) for Visual Studio that does this for Online and OnPrem: https://visualstudiogallery.msdn.microsoft.com/1a3b0a63-5d44-40b9-bf92-73d33f0aa198.

    Credentials are prompted once and held in memory only. It can also generate PowerShell script for deployment/promotion into higher environments.

Comments have been disabled for this content.

About Wictor...

Wictor Wilén is the Nordic Digital Workplace Lead working at Avanade. Wictor has achieved the Microsoft Certified Architect (MCA) - SharePoint 2010, Microsoft Certified Solutions Master (MCSM) - SharePoint  and Microsoft Certified Master (MCM) - SharePoint 2010 certifications. He has also been awarded Microsoft Most Valuable Professional (MVP) for seven consecutive years.

And a word from our sponsors...