How to use different manifest files for development and production Excel JS React?

Question

I am trying to develop an office add-in and I succesfully deployed it to Azure. But for testing small iterations of my code I would like to use the localhost. So I would like to have a development environment and a production environment. Sadly the MS documentation on how to handle this is rather thin. How can I setup the project for deployment and testing? the MS documentation only states that it is recommended to maintain different manifest files: microsoft manifest documentation

I have created a manifest.xml and an manifest_prod.xml file but how can I configure the project which manifest file to take? in the webpack.config.js file I can see this info:

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

But how should the project be set up? so I can choose to run the development (local server) and once ready, I can deploy that to Azure?

many thanks for suggestions on the matter.

Answer 1

In case if you've used the yeoman generator for scaffolding the web add-in project Webpack is used for handling such things. Open the wepblpack.config.js file and find the following lines there:

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

So, your manifest will be updated according to the config used to build the solution. The following part does the trick:

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);
              }
            },
          },
        ],
      }),

So, building the add-in in the release configuration you will get a correct manifest file copied pointing to the production URL.

Try to use the following commands and then check out the result manifest file:

"build": "webpack --mode production",
"build:dev": "webpack --mode development",