How to Publish Outlook Add-in using Visual Studio Code?

Introduction

In this blog, we will see how to publish outlook add-ins using Visual Studio Code on the 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 the 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 Plugin directly through Visual Studio Code using the Azure Storage Extension.

So, Let's get started and explore!

Steps to publish Outlook Add-in:

Note: These steps work only for projects created with 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 into your Azure account by selecting Sign in to Azure.

Step 5: Once you have signed into 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 will open inside the Visual Studio, enter the default document name. By default it's index.html, we can change and set it to taskpane.html and press enter key. Then, it will ask for 404 error document you can skip as 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 references which point to 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 be created in the root directory

Step 11: Then press right-click on the dis folder and select Deploy to Static Website.

Step 12: Once deployed successfully, "Browse to website" message appears from which you can select and open your app.

Conclusion

This is how we can publish outlook add-ins in the Azure Storage Account using Visual Studio Code.

If you have any questions you can reach out our SharePoint Consulting team here.