Legacy SharePoint Development (2007 and 2010) - Gulp and Robocopy

What is Robocopy and Why Should I Use It?

If you're still developing with JavaScript in SharePoint 2007 or 2010, then gulp-spsave is not available.  Spsave relies on SharePoint's RESTful API which was not fully introduced until SharePoint 2013.  Thankfully there is an alternative called Robocopy.  Robocopy is a program that can quickly copy files and folders from a local source to a network-based destination.  With SharePoint's native WebDAV support we can leverage Robocopy to allow developers to build code for legacy SharePoint versions right in Visual Studio or its free alternative Visual Code.  This also means that developing in SharePoint Designer or manual file uploading is no longer necessary.

In this example we are going to use a Node wrapper for Robocopy that will allow us to use it with Gulp.  If you are not familiar with Gulp yet, it’s a Javascript toolkit that is used to automate common repetitive development tasks.  If you are interested in learning more about Gulp, you can get more information about it here.

How?

Below are a series of steps you need to take to leverage Robocopy and Gulp with Visual Code.

The Prerequisites

1. Download and install NodeJS: https://nodejs.org/en/

2. Download and install Visual Code: https://code.visualstudio.com/download

Setup Your Project

3. Create a folder for your SharePoint project on your PC.

Figure 1
Figure 1 - Example of project folder

4. Then open up Visual Code and open the project folder you created.  Opening a project folder can be accomplished by clicking the File tab in the navigation bar and then selecting the Open Folder option.

5. Now you need to install Gulp for the project.  Go to the View tab in the navigation bar and then click the Integrated Terminal option. The Integrated Terminal allows you to issue commands for node, git, etc. for your specific project.  Type in “npm install gulp” into the command prompt.

Figure 2
Figure 2 - NPM install gulp

6. Then type in “npm install robocopy” into the command prompt.

7. Now it’s time to setup node package manager for the project.  Type in “npm init” into the command prompt.

Figure 3
Figure 3 - npm init

8. You will be prompted a series of questions to answer (example in the screenshot below).

Figure 4
Figure 4 - Questions to answer when running npm init

9. When complete, you will see a file called package.json created.

Figure 5
Figure 5 - Newly created package.json file

10. Create the App folder, where you will store your files, by clicking the folder icon which is the second icon from the left of the project.

Figure 6
Figure 6 - Create folder button

11. Within the App folder, add a file you wish to upload to SharePoint.  Here is an example file we created:

Figure 7
Figure 7 - Example file to be uploaded to SharePoint

Note: You may wonder why the example has an .aspx extension.  Depending on your site’s Browser File Handling, html files might not render in the browser.  If it has an .aspx extension it will always render in the browser.

12. Next you will need to create the gulpfile.js file.  Click the New File icon which is the first icon from the left of the project.

Figure 8
Figure 8 - New file button

13. Paste the following into the new file and save as "gulpfile.js":

1. var gulp = require("gulp");
2. var robocopy = require("robocopy");
3.  
4. gulp.task('deploy', function() {
5.	return robocopy({
6.     	source: 'App',
7.    	destination: 'Y:/Style Library/js', 
8.    	files: ['*'],
9.    	copy: {
10.        	subdirs: true,
11.	        mirror: false,
12.        	emptySubdirs: true
13.    	},
14.    	retry: {
15.        	count: 2,
16.        	wait: 3
17.    	}
18.	 });
19. });
20. gulp.task("default", ["deploy"], function () { });
 

14.  Line 6 identifies the location of the files we are going to copy; the source.  In our example we will use the  App folder as the source.

15.  Line 8 identifies what specific files in the project will be copied.  In our example we will copy all the contents within the App folder to SharePoint.

16. Line 20 identifies that when you run gulp's build task ("default"), run the "deploy" task (line 4) which leverages the robocopy functionality.

17. Line 7 identifies where the files will be saved on SharePoint.  In our example we upload files to the Style Library's "js" (JavaScript) folder.  You will notice that the Y directory is used to reference the SharePoint site.  Robocopy cannot connect directly to SharePoint without mapping our PC to the SharePoint environment.  Steps 18 through 21 go over how to map a network drive with Windows 7.  For Windows 10, please see this link.

Mapping SharePoint Site to Network Drive

18.  On your Windows PC, press the Windows button on your keyboard and click the "Computer" option.

19.  Then click on the "Map network drive" button.

Figure 9
Figure 9 - Map network drive

20.  On the "Map Network Drive" screen select the drive letter (make sure line 7 of the gulpfile.js is updated accordingly) and in the folder field enter the URL of the SharePoint site (ex: http://yoursharepointwebapp/sites/example).

Figure 10
Figure 10 - Map Network Drive screen

21.  Press the "Finish" button and you should see a new drive added to your computer.

Figure 11
Figure 11 - A new drive mapped to SharePoint

Configure Task Runner Gulp

22. Now we just need to tell Visual Code to run Gulp.  Open the Command Palette by clicking on the View tab in the navigation bar and select the Command Palette option.

23. Type in Configure Task Runner and hit Enter

Figure 12
Figure 12 - Configure Task Runner

24. Select the Gulp option.

Figure 13
Figure 13 - Select Gulp

 

Run Gulp

25. To run Gulp you can press “Ctrl + Shift + B” which runs the build task and, if your setup is correct, the Gulp task should finish without any errors (example below).

Figure 14
Figure 14 - Example of a successful build

Check SharePoint

26. When you navigate to the Style Library of your SharePoint site you will see the files within the App folder are uploaded.

Figure 15
Figure 15 - File successfully uploaded to SharePoint with Gulp and Robocopy

This lays the foundation for you to use Gulp and Robocopy to develop modern SharePoint applications in legacy SharePoint environments.  Gulp offers so much more development aids, so keep an eye on our blog for future tips.  At Definitive Logic we know SharePoint Development!

 

Author: 
David Osorio and John Kerski