On
In this post we will use a gulp-env and gulp-replace node packages to create two different gulp tasks (build-prod and build-dev) these tasks will generate two different manifest files for office add-in each will be suitable for different environment.
The tasks simply replaces a SITE_URL token in the manifest file with the predefined urls in the abovementioned gulp tasks.
In this walk-through we will use the Office-generator created by OfficeDev team to generate a simple outlook add-in, review my previous post for full walk-through of how to use Office generator

In order to use gulp-env and gulp-replace you need to install both modules using npm install as shown below:


after installing the two node packages , open the generated add-in folder using your favorite text editor, in my case I'm using Visual Studio Code
  1. let's open gulp.js file which have been generated for us using the office generator 
  2. let's define gulp-env and gulp-replace variables
  3. now create a gulp task to add our web url to environment variables , one for each environment
  4. open manifest.xml file and replace the generated url (https://localhost:8443) with SITE_URL string
  5. create two gulp tasks one for prod build and other for dev build
  6. now back to the command/termainal window and type
  7. The manifest.xml file is generated under build folder and it has the production azure url