On
In this post we will explore how to build an Office Add-in using Office Yo Generator on Mac OS, in the beginning we will make sure that we have all the prerequisites ready. then we will run the add-in using local server and then publish it to an azure web app , let's jump to the walkthrough right away :)

  1. Install NodeJS to have NPM ready 
  2. Install Yomean bower and office generator globally (you might need to switch to your root account to install this globally)
  3. Create a new directory and run Yo Office to start the office generator
  4. Type the name of the Add-In in my case I'm repurposing Outlook2Yammer Outlook Add-in previously published here
  5. Choose Mail Add In
  6. You can choose any technology to use , I will simply use HTML and CSS
  7. Only enable it in the Message compose form
  8. Now all the files has been created for us
  9. Open the folder using Visual studio Code
  10. let' change our Home.html and home.js to add our logic (see previous post here)
  11. To enable deploy to azure website directly I simply followed greg's  great guide here

  12. Let's try our Office-Add-in, simply update the manifest file by adding the icon URL and Support Url, in my case I simply removed them, also make sure that the source location points to the correct local URL
  13. from the app launcher, go to your office365 tenant admin portal choose exchange from the left side menu, then choose Add-ins
  14. Upload your manifest.xml file to the Add-ins
  15. If you go to your outlook and try to compose new message , click on add-ins then click on Outlook2Yammer add-in icon nothing will load as the local server is not running
  16. let's run our local server
  17. now we can see that the add in is working
  18. To publish the add-in to azure web site , let's create a new azure webapp 
  19. from dashboard let's setup deployment from Source Control
  20. Choose Local Git repository
  21. now let's update the Add-in manifest file to point to the azure website instead of the local server
  22. Commit and push the code to the azure local git repository
  23. As we can see in the terminal window, npm and bower packages is been installed as part of the deploy script added by azure-cli node package
  24. Now if we overwrite the manifest file under exchange portal the add-in will work from the azure website link not the local server.