Building Office Add-In Using Office Yo Generator
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 :)
- Install NodeJS to have NPM ready
- Install Yomean bower and office generator globally (you might need to switch to your root account to install this globally)
- Create a new directory and run Yo Office to start the office generator
- Type the name of the Add-In in my case I'm repurposing Outlook2Yammer Outlook Add-in previously published here
- Choose Mail Add In
- You can choose any technology to use , I will simply use HTML and CSS
- Only enable it in the Message compose form
- Now all the files has been created for us
- Open the folder using Visual studio Code
- let' change our Home.html and home.js to add our logic (see previous post here)
- To enable deploy to azure website directly I simply followed greg's great guide here
- 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
- from the app launcher, go to your office365 tenant admin portal choose exchange from the left side menu, then choose Add-ins
- Upload your manifest.xml file to the Add-ins
- 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
- let's run our local server
- now we can see that the add in is working
- To publish the add-in to azure web site , let's create a new azure webapp
- from dashboard let's setup deployment from Source Control
- Choose Local Git repository
- now let's update the Add-in manifest file to point to the azure website instead of the local server
- Commit and push the code to the azure local git repository
- 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
- Now if we overwrite the manifest file under exchange portal the add-in will work from the azure website link not the local server.