EDIT: Apparently, I misunderstood how Office Add-ins worked. Please see my comment below for how I was able to figure things out.
I was able to get an Excel office add-in working this weekend. The add-in was created with yeoman generator. I'm testing this add-in in both Excel desktop (PC) and Excel online.
The add-in currently runs in the following structure:
In order to get the add-in up and running I had to do a few things:
<script> tag in the takespane.html file and execute the javascript code there.If I don't move the taskpane.html file to the root directory, I get a 404 error when I try to load the add-in in Excel Online or Excel desktop once it's been uploaded to Github Pages.
I've tried multiple attempts to reference taskpane.js to get the add-in to reference code in that file. I've tried creating a <script> tag referencing this file from takepane.html. And I've looked into changing values in the webpack.config.js and the manifest.xml files. All of my attempts have been unsuccessful.
I was wondering if anyone knew of why I was experiencing these issues. Or could point me in the right direction of what I should be doing. I appreciate any advice. And I'm happy to provide any code requested.
You need to update the yeoman generator which can be used to scaffold a new add-in project. The newly generated add-in uses Webpack as a bundler. In that case it doesn't matter where your files are located.
After lots of trial and error I figured things out. It turns out I was confused about how Office Add-ins worked. Instead of uploading the add-in project, I was supposed to upload the distribution of the add-in project. That may be obvious to traditional developers / web developers. But I'm an Excel developer so it's not obvious to me. There's lots of material talking about how to create and run a local add-in. But not many talking about how to upload and distribute such an add-in. So this is what I had to do to make things work:
takepane.js in the /src/takepane directory in the Office add-in project.urlProd constant in the webpack.config.js with the URL where the files will be uploaded (I used Github Pages for this)npm run build in the directory for the Office Add-in. This will create the dist directory in your Office add-in folder.urlProd constant.manifest.prod.xml file from the dist directory (or provide the URL to this file) to the Microsoft 365 admin center.The route I listed above can be tricky. Using the Azure guide is easier imo. You can look into using that guide here
After some delay, the add-in will display. For me the add-in is working in Excel Online. But I'm getting certificate issues with Excel desktop. So I'll be looking into that next.