Set value of a variable depending on build for an Office AddIn (conditional var)

I have developed a Word Office AddIn using Office.js. The AddIn works fine but now I want to deploy the AddIn to an Acc. environment. Of course, the used UR's in de Manifest have to be changed when the AddIn is deployed as I could read here. This has to be done manually.

The Office AddIn consists of a taskpane.js file, In this file, I call two endpoints of an API. The URL for this API is stored in a local var.

let serverUrl = `https://dev.myorganisation.com/api/atlas`;
let projectUrl = `${serverUrl}/projects/`;
let wsReGeBo = `${serverUrl}/wms`;
let mapUrl = `${serverUrl}/printconfig/printmap/[title]/[scale]/[lng]`;

Now my question is when I want to deploy the addIn and start npm run build, the taskpane.js still contains the dev-url.

Can I somehow make this dynamic? I mean when I develop and test the URL is oke, but when I deploy and run the npm run build commando automatically replace the dev-url with something like ACC or prod so the URL would look like

let serverUrl = `https://acc.myorganisation.com/api/atlas`;

or

let serverUrl = `https://prod.myorganisation.com/api/atlas`;

Any suggestions?

Oke, after a good day of research, where I couldn't find an answer, I worked out a solution with a colleague of mine. I have to note that this AddIn is only used within our organization, so security is a lesser problem. Also good to mention that is AddIn is created using Yeoman.

The solution we came up with uses a config-file where the API-url is stored. I have 3 config-files, one for development, one for acceptation, and one for production.

• config.developer.json
• config.acceptation.json
• config.json (this is the production config)

Depending on how the project is built, one of these configs is used to read from. I altered the taskpane.ts to read the config.file.

import  env from "../config.json";

let serverUrl = `${env["api-url"]}/api/atlas`;
let projectUrl = `${serverUrl}/projects/`;

this piece of code is at the top of my taskpane.ts (it is only part of the code). I also altered the webpack.config.js in de plugin-section I add the next piece of code:

new webpack.NormalModuleReplacementPlugin(/(\/|\\)(config\.json)$/, resource => {
        const fullpath = path.parse(path.join(resource.context, resource.request));
        const configOrder = [
          `config.${configPostfix}.json`,
          'config.json',
        ];
        for (const name of configOrder) {
          const configPath = path.join(fullpath.dir, name);
          if (fs.existsSync(configPath)) {
            resource.request = configPath;
            break;
          }
        }
      }),

What it does, it looks for a config.json file. If it finds the file I will replace it depending on the way the application is built. I.e. development, acceptation or production.

Right below the module.export of the webpack.config I have the following lines:

const dev = options.mode === "development";
const buildType = dev ? "dev" : "prod";
const configPostfix = options.acc ? 'acceptation' : options.mode;

The first two lines are present by default. The third I added in order to use create the van configPostfix which is used in the plugin section.

The last thing I did, added line to the script section of the package.json:

"build:acc": "webpack -p --mode production --https false --acc"

The content of the config.json file look like:

• {"api-url":"https://example.domain.com"} for production (config.json)
• {"api-url":"https://example-acc.domain.com"} for acceptation (config.acceptation.json)
• {"api-url":"https://example-dev.domain.com"} for development/test (config.development.json)

This solution works for me. Now I can build targeting the environment I need without manually having to alter my taskpane.ts file.