Deploy, host and sideload Excel Office Addin - Error loading add-ins

Question

I've been trying to develop and deploy an Excel Office Addin and I've run into a few issues.

I've created an office addin by following the tutorials posted on your site. I've confirmed that I can run the addin in debugging (from my Visual studio code). So the next step is hosting and deploying the addin.

I first followed the instructions here: https://learn.microsoft.com/en-us/office/dev/add-ins/publish/publish-add-in-vs-code I was able to publish it on an Azure static website and when I browse there, I can see it say "Please sideload your add-in to see app body." So far so good.

Next, I followed the steps here : https://learn.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins

I was able to create a shared folder and add it as a trusted catalog in Excel. When I open up Excel, I can see my Addin in the shared folder section of "My Addins". I can click on it.

However, as soon as I click on it to load it in Excel, the status bar in my Excel says "Error loading add-ins" and there's not much else to do. It doesn't provide me anymore logs to work off of. The very last step of loading the office addin fails.

I believe that I've followed all the instructions in the tutorial correctly, including changing references in my manifest.xml file from localhost to the static website's url.

I have a few questions...

Was I correct to follow those two tutorials above in that order? In other words, has there been an issue with my process?
One of the steps mentioned copy/pasting the manifest file into the shared folder I created. Am I pasting the manifest.xml? Or the manifest.prod.xml from my dist folder? In both cases I run into the same error of not being able to load it properly in Excel.
It mentions to replace all references of localhost to the static website's URL in the manifest.xml file. I noticed that there is also a file called webpack.config.js in the root folder of the excel addin project that has a constant called urlProd with a comment telling us to change it to the production deployment location. The tutorials make no mention of this. I did change this to point to the static website I created to host the addin. Is this necessary?

EDIT:

My manifest, where I've replaced localhost with the url of my azure static website:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
  <Id>5a711560-c5ed-4c07-8020-39460e56846b</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Contoso</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="MyCustomFunctions"/>
  <Description DefaultValue="Write your own Excel functions in TypeScript."/>
  <IconUrl DefaultValue="https://[static.website.url.on.azure]/assets/icon-32.png"/>
  <HighResolutionIconUrl DefaultValue="https://[static.website.url.on.azure]/assets/icon-64.png"/>
  <SupportUrl DefaultValue="https://www.contoso.com/help"/>
  <AppDomains>
    <AppDomain>https://www.contoso.com</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Workbook"/>
  </Hosts>
  <Requirements>
    <Sets DefaultMinVersion="1.1">
      <Set Name="SharedRuntime" MinVersion="1.1"/>
    </Sets>
  </Requirements>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://[static.website.url.on.azure]/taskpane.html"/>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Workbook">
            <Runtimes>
        <Runtime resid="Taskpane.Url" lifetime="long" />
      </Runtimes>
        <AllFormFactors>
          <ExtensionPoint xsi:type="CustomFunctions">
            <Script>
              <SourceLocation resid="Functions.Script.Url"/>
            </Script>
            <Page>
              <SourceLocation resid="Taskpane.Url"/>
            </Page>
            <Metadata>
              <SourceLocation resid="Functions.Metadata.Url"/>
            </Metadata>
            <Namespace resid="Functions.Namespace"/>
          </ExtensionPoint>
        </AllFormFactors>
        <DesktopFormFactor>
          <GetStarted>
            <Title resid="GetStarted.Title"/>
            <Description resid="GetStarted.Description"/>
            <LearnMoreUrl resid="GetStarted.LearnMoreUrl"/>
          </GetStarted>
          <FunctionFile resid="Taskpane.Url"/>
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <OfficeTab id="TabHome">
              <Group id="CommandsGroup">
                <Label resid="CommandsGroup.Label"/>
                <Icon>
                  <bt:Image size="16" resid="Icon.16x16"/>
                  <bt:Image size="32" resid="Icon.32x32"/>
                  <bt:Image size="80" resid="Icon.80x80"/>
                </Icon>
                <Control xsi:type="Button" id="TaskpaneButton">
                  <Label resid="TaskpaneButton.Label"/>
                  <Supertip>
                    <Title resid="TaskpaneButton.Label"/>
                    <Description resid="TaskpaneButton.Tooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <TaskpaneId>ButtonId1</TaskpaneId>
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://[static.website.url.on.azure]/assets/icon-16.png"/>
        <bt:Image id="Icon.32x32" DefaultValue="https://[static.website.url.on.azure]/assets/icon-32.png"/>
        <bt:Image id="Icon.80x80" DefaultValue="https://[static.website.url.on.azure]/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Functions.Script.Url" DefaultValue="https://[static.website.url.on.azure]/dist/functions.js"/>
        <bt:Url id="Functions.Metadata.Url" DefaultValue="https://[static.website.url.on.azure]/dist/functions.json"/>
        <bt:Url id="Functions.Page.Url" DefaultValue="https://[static.website.url.on.azure]/dist/functions.html"/>
        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812"/>
        <bt:Url id="Commands.Url" DefaultValue="https://[static.website.url.on.azure]/commands.html"/>
        <bt:Url id="Taskpane.Url" DefaultValue="https://[static.website.url.on.azure]/taskpane.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="Functions.Namespace" DefaultValue="CONTOSO"/>
        <bt:String id="GetStarted.Title" DefaultValue="Get started with your sample add-in!"/>
        <bt:String id="CommandsGroup.Label" DefaultValue="Commands Group"/>
        <bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started."/>
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane"/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

@EugeneAstafiev Thanks for responding, I've added my manifest in the edit above. — Jason Lee, Dec 16 '21 at 22:09
It should work correctly from both places - remote url or shared folder. — Eugene Astafiev, Dec 17 '21 at 09:02
I guess the error is still at manifest, would you please follow this article to see what's wrong with your manfiest: https://learn.microsoft.com/en-us/office/dev/add-ins/testing/troubleshoot-manifest? — MSFT-Jipyua, Dec 20 '21 at 02:21
@MSFT-Jipyua I went through the steps above and got the message "The manifest is valid." Please let me know if there's anything else to check. Thanks. — Jason Lee, Dec 21 '21 at 21:03

Eugene Astafiev · Answer 1 · 2021-12-17T09:04:00.057

Was I correct to follow those two tutorials above in that order? In other words, has there been an issue with my process?

It depends... The Sideload Office Add-ins for testing from a network share article states the following:

Deployment by network share is not supported for production add-ins.

And also you can meet the following statement:

This deployment option is intended to be used when you have completed development and testing on a localhost and want to test the add-in from a non-local server or cloud account.

So, it is possible to use shared folders for sideloading add-ins on Windows.

But it seems you have already published the manifest file to the static storage in Azure. So, you can use it for sideloading the add-in in Excel - just use the manifest's URL for adding the add-in in Excel.

One of the steps mentioned copy/pasting the manifest file into the shared folder I created. Am I pasting the manifest.xml? Or the manifest.prod.xml from my dist folder? In both cases I run into the same error of not being able to load it properly in Excel.

The manifest.prod.xml from your dist folder is uploaded to the static storage in Azure, so you can refer to it instead of using shared folders. It is up to you which way is to choose - use the shared folder or hosted file on the server. However, you need to pay attention to the URLs used in the manifest file - they should point to the add-in's files.

It mentions to replace all references of localhost to the static website's URL in the manifest.xml file. I noticed that there is also a file called webpack.config.js in the root folder of the excel addin project that has a constant called urlProd with a comment telling us to change it to the production deployment location. The tutorials make no mention of this. I did change this to point to the static website I created to host the addin. Is this necessary?

Tutorials can be a bit old and may not reflect all information available to developers. Project skeletons created with Yeoman generator are updated from time to time and you may get new features implemented out of the box.

If you set the urlProd constant to a valid URL then you can get the URLs set correctly in the manifest.prod.xml file from your dist folder after the project is built (in the production mode).

The manifest file is uploaded to the Azure static web site along with other add-in files. To install the add-in by using that manifest file it should point to the production URL. It is up to you to change the URLs manually or automatically (by using webpack).

Also, the AppDomain element specifies an additional domain that Office should trust, in addition to the one specified in the SourceLocation element.

Deploy, host and sideload Excel Office Addin - Error loading add-ins

1 Answers1

Linked