Can we make dynamic URL in manifest file in officejs?

Question

I am new to office addins. I want to add the environment variable . As in the below manifest code, we can see that the URL http://localhost:3000/ is repeated again and again. I want to store this URL in any specific place or in any file and after that, I want to use it in the manifest file. So, whenever I change the URL it will reflect all the places . We don't require to change at all. I am not getting any idea about it. so can anyone guide me on " How to use a single URL in the manifest with an environment variable? "

<?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>083aced0-1978-4026-bfb3-86e91ecdf2ec</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Test Excel Add-in</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="Test Excel Addin" />
  <Description DefaultValue="A template to get started." />
  <IconUrl DefaultValue="https://localhost:3000/assets/Favicon-36px.jpg" />
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/Favicon-36px.jpg" />
  <SupportUrl DefaultValue="https://test.zendesk.com/hc/en-us" />
  <AppDomains>
    <AppDomain>https://demo.test.test</AppDomain>
    <AppDomain>https://test.test-const.net</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/taskpane.html" />
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Workbook">
        <DesktopFormFactor>
          <GetStarted>
            <Title resid="GetStarted.Title" />
            <Description resid="GetStarted.Description" />
            <LearnMoreUrl resid="GetStarted.LearnMoreUrl" />
          </GetStarted>
          <FunctionFile resid="Commands.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://localhost:3000/assets/Favicon-36px.jpg" />
        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/Favicon-36px.jpg" />
        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/Favicon-36px.jpg" />
      </bt:Images>
      <bt:Urls>
        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
        <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html" />
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GetStarted.Title" DefaultValue="Get started with test Add-in" />
        <bt:String id="CommandsGroup.Label" DefaultValue="Commands Group" />
        <bt:String id="TaskpaneButton.Label" DefaultValue="test" />
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="GetStarted.Description" DefaultValue="test Add-in Loaded Successfully" />
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="test Add-in Taskpane" />
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

Answer 1

The URLs in the manifest.xml file cannot change after the manifest has been uploaded to Microsoft AppSource (aka "the Store") or uploaded using Centralized Deployment in the Microsoft 365 Admin portal. It is not possible to store the URLs outside of the manifest.xml file once the manifest has been published or deployed.

You can change how the manifest.xml file is generated by modifying the webpack.config.js file in your add-in project by changing the following code:

plugins: [
  ...
  new CopyWebpackPlugin({
    patterns: [
      ...
      {
        from: "manifest*.xml",
        to: "[name]" + "[ext]",
        transform(content) {
          if (dev) {
            return content;
          } else {
            return content.toString().replace(new RegExp(urlDev + "(?:public/)?", "g"), urlProd);
          }
        },
      },
    ],
  }),

Answer 2

Typically in Node based applications you could store environment variable in ENV files in the following way:

# .env file
USER_ID="239482"
USER_KEY="foobar"
NODE_ENV="development"

And read them in your application when required:

require('dotenv').config();

process.env.USER_ID; // "239482"
process.env.USER_KEY; // "foobar"
process.env.NODE_ENV; // "development"

And you can do so in Office web add-ins.

But add-in manifest files are processed by the webpack and the final URL depends on the configuration of webpack where you can specify the release and debug URLs and depending the build conditions the required manifest file will produced with the right URL. If you use VSCode and Yeoman generator was used to scaffold the project, in the webpack.config.js file you may find the following declarations:

const urlDev = "https://localhost:3000/";
const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

In the file you may find the code which replaces the localhost entries in your manifest file with the production URL specified in the code (see urlProd ).

 new CopyWebpackPlugin({
          patterns: [
            ...
            {
              from: "manifest*.xml",
              to: "[name]" + "[ext]",
              transform(content) {
                if (dev) {
                  return content;
                } else {
                  return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
                }
              },
            },
          ],
        }),

That is done by the webpack. You don't need to replace URLs manually in the manifest file.