How To Publish Outlook Add-Ins Using Visual Studio Code

Introduction

In this article, we will see how to publish Outlook add-ins using Visual Studio Code on Azure Storage account.

An Office Add-in consists of a web application and a manifest file. The web application defines the Add-in's user interface and functionality, while the manifest specifies the location of the web application and defines settings and capabilities of the Add-in.

While we are developing Add-In, we can run the add-in on our local web server (localhost). But what if we need to publish it? We can publish Outlook Plug-in directly through Visual Studio Code using the Azure Storage Extension.

So, Let's get started and explore!

Steps to publish Outlook add-ins

Note
These steps only work for projects created with the Yeoman generator.

Step 1

Open project in Visual Studio Code.

Step 2

Open the Extensions view in VS Code, search for the Azure Storage extension and install it.

Step 3

Once installed, an Azure icon is added to the Activity Bar. Select it to access the extension.

Step 4

Sign in to your Azure account by selecting Sign in to Azure.

Step 5

Once you have signed in to your Azure account, you'll see your Azure storage accounts appear in the extension.

Step 6

Select and hold (right-click) your storage account, Choose Configure Static Website. 

Step 7

Once we select Configure Static Website, new popup open inside the Visual Studio and enter default document name. By default, set index.html change and set taskpane.html and press enter key then it will ask for 404 error document, you can skip it’s optional.

Step 8

Select and hold (right-click) your storage again and choose Browse static website. New browser window will open from that copy the website URL.

Step 9

Open your manifest.xml file from the project and then change all the reference which point your localhost (https://localhost:3000) to the URL you've copied.

Step 10

Open your Visual Studio Code terminal and run the following command. 

 npm run build

When the build completes, the "dist" folder will create in the root directory

Step 11

Then press right click on the dist folder and select Deploy to Static Website.

Step 12

Once deployed successfully a Browse to website message appears from which you can select and open your app code.

Conclusion

This is how we can publish outlook add-ins in Azure storage account using Visual Studio code.