Monday, 27 June 2016

OfficeDev: Yet a more CI friendly version of Office Generator "Yo Office"

In this post I will explain in details how to update Office generator template to generate more CI friendly version  by updating dist gulp task

Building blocks
The building blocks for any Office Add-in (with exception of SharePoint Add-ins) is simply a manifest file and a web application, the manifest file holds all the information the office client need to know about the addin like ribbon Commands, Publisher and version information. Most importantly It contains the url of the actual web application rendered within wither Office Online or office client.

How to Build Office Add-ins
To build office add-ins you can simply use either Visual Studio template shipped as part of Development tools for Office or Yeoman Generator template for cross platform development.

today we will focus on a simple modification of the existing office generator template, let's take a look at the existing template code here https://github.com/officedev/generator-office if we take a look at the generated gulpfile.js for our office add-in for example let's take a look at generated gulpfile.js at  https://github.com/OfficeDev/generator-office/blob/master/generators/content/templates/common/gulpfile.js

we can see that the dist task consist of simple subtasks which clean the destination folder , copy files and minify all the scripts.


If we go ahead and generate  a new add-in using the current version of office generator after running gulp dist to generate we can locate out manifest file in our output ./dist folder and we can see that all urls are basically pointed out to localhost.


The Solution
Having the generator as an open source solution allows anyone to easily fork it to his/her repository my fork which contain the generated gulpfiles.js update can be found at https://github.com/ministainer/generator-office

I've created a simple gulp task called replace-url and add it to the list of substasks of dist task



as you can see the simple added code depends on 'gulp-replace' and 'yargs' modules


now let's start testing the new generator , linking generator-office template to my code

run the generator passing --url parameter

now the generated manifest file has the passed URL as base URL

access the code @https://github.com/ministainer/generator-office