SummaryAddIn

Setup and test locally

Build and deploy to static web host

Publish to organization

Publish as Outlook Mobile AddIn

Debug

Setup

This is a quick POC to show how Outlook Add-In uses backend service to handle email content.

1. Follow the guide to install latest Node.JS, use Yeoman to create Javascript project, and use Visual Studio Code to develop:

   https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/outlook-quickstart?tabs=yeomangenerator

This add in uses the same project structure, and Taskpane.js contains the main logic.

The Add-In can be tested in Classic Outlook, New Outlook, and Web Outlook.

2. If you are in debug phase, enable CORS for https://localhost:3000 on the service endpoint.

The menu layout in Web Outlook and New Outlook:

The menu layout in Classic Outlook:

The TaskPane UI:

Deploy

Here is the guide to publish the Built Script to Azure Blob Storage as a Static Web App:

https://learn.microsoft.com/en-us/office/dev/add-ins/publish/publish-add-in-vs-code

Alternatively, you can also run "npm run build", and put the "dist" folder content to other web host instead of Azure Blog Static Web App. Don't forget to change localhost reference in your manifest.xml as Step 9 points out.

Publish to Organization

Login as Global Admin or Application Admin on https://admin.microsoft.com , follow this guide to publish this AddIn manifest.xml as Integrated App in your organization, it may take up to 24 hours to show up for clients:

https://learn.microsoft.com/en-us/microsoft-365/admin/manage/office-addins?view=o365-worldwide#deploy-your-office-add-ins

After deployment, the admin site can display:

Click the Integrated App item, can update or remove it:

About more information about the publish process and related requirement, can read:

https://learn.microsoft.com/en-us/office/dev/add-ins/publish/publish

https://learn.microsoft.com/en-us/microsoft-365/admin/manage/test-and-deploy-microsoft-365-apps?view=o365-worldwide

Publish as Outlook Mobile Addin

To support Mobile (IOS) device, it requires to define MobileFormFactor in manifest.xml, the guideline is:

https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/outlook-mobile-addins

Pay attention to the Difference section.

Besides this, ensure the resid is decalred in Resources.

There is a good discussion and reference in stackoverflow

https://stackoverflow.com/questions/51641999/why-wont-this-xml-file-with-mobileformfactor-for-office-addin-work

The manifest.xml in this project is also updated to support Mobile and PC Outlook clients.

Debug

For Windows 11 environment, suggest to follow this article:

https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-desktop-using-edge-chromium

Note: It is possible to use remote URL to replace localhost:3000 in manifest.xml and continou using local debugging. If the breakpoint cannot be hit, can use the Edge Inspact to set breakpoints and debug it:

If hits dev enviornment issue (Yoeman Office debug or build), can raise issues to:

https://github.com/OfficeDev/generator-office