OfficeDev: Yet a more CI friendly version of Office Generator "Yo Office"
On Yeoman
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
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
Amr Fouad
Technologist ,Egyptian 🇪🇬, Traveller ✈️ @OfficeDev MVP ,Speaker, Anime fan and huge believer
No Comment to " OfficeDev: Yet a more CI friendly version of Office Generator "Yo Office" "