Search code examples
office-jsoffice-addins

How to run office add-ins in development on an iPad or other mobile device

I am trying to follow the steps from https://learn.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad and apply them to any of the official samples from https://github.com/OfficeDev/Office-Add-in-samples.

Copying over the manifest.xml and loading it on Word on the iPad as per the instructions works fine, but the manifest points towards https://localhost:3000, where the webpack webserver is running on the development PC. The taskpanel inside Word on the iPad complains that it cannot load the add-in, and rightfully so.

Should I try and DNS a public URL to my development PC, hook up a self-signed certificate in webpack, and use that in the manifest? Would that work?

I am hoping I am missing a much more obvious route to doing office add-in development for mobile devices.

Solution

  • (As far as I have it figured out, only a tiny amount of this problem is solved using code, so I am not sure how well it fits SO... even though this setup is a requirement for effectively writing code. I might delete the question later)

    The manifest needs to point to a valid, public https website. This means that in order to have it point to your development environment, you need to either

    1. Develop directly on a public server (usually not feasible), or
    2. Have your development machine and server in the same VPN and run a reverse proxy on the server with correct dns+ssl setup, or
    3. Run a tunneling tool that handles (2) for you, like ngrok

    The manifest will need to point to this public domain.

    The manifest itself can be published ("sideloaded") to the office application on the iPad as follows:

    1. Run iTunes on the PC
    2. Connect the iPad to the PC using an USB cable.
    3. Click on the device icon in iTunes to open it
    4. A file browser will now appear, with per-app folders for the installed office applications
    5. Copy manifest.xml into the desired folder.

    Restarting the respective office app will now have load this manifest. Every time the manifest changes (i.e. the UI or event bindings need to change) you need to repeat this process.

    All other code can be changed on the developer machine and becomes active as soon as the office app is restarted / the add-in is removed and re-added within the app.