Which preferred IDE for Office JS Excel addins

Question

I am trying to develop add-ins for Excel with the Microsoft JS API. I have read the book from Michael Zlatkovsy about building office add-ins using Office.JS. but it is a very steep learning curve (having some background on VB 6, C, C# and Java. The problem here is that I have no idea which is the best approach to develop the add-ins?

1. Is it Visual Studio 2017
2. Visual Studio Code with Yo-man generator?

I tried to contact Michael Zlatkovsky, via the email address mentioned in his book, but sadly I never got a reply and on the Microsoft docs they just state the 2 options but they do not mention the fact that a Visual studio project is not in TypeScript and if you convert it to TypeScript, only the generated JavaScript is debugged, there is no way in getting the debugger to work directly on the TypeScript code as it should.

The error messages from the debugger in general are also not really precise. So any advice in the easiest way to develop the add-ins would be appreciated. I never needed so much time to learn a new technology than with the Office JS approach.

Many thanks in advance,

Answer 1

Great question.

Creating Office.js add-ins -- or even just a modern website in general, and Office.js add-ins really are just a website plus a manifest -- is certainly more involved than creating a VBA/VSTO project. So to set expectations, there will be a learning curve.

Depending on your level of comfort with web tech -- and your willingness to learn React if you don't know if yet -- I would definitely recommend going down the path of using either Yo Office or Create React App. Both of those would fall into the second camp, of using something ("yo" or CRA) to generate a project for you that you'd be using with VS Code, rather than starting out with the Office Add-ins project templates in Visual Studio (which are a little out of date at this point, and don't lend themselves as easily towards modern web tech like React). You would still use Visual Studio for debugging, however. The experience isn't 100% seamless, but it's not bad, either. For example, the add-in Script Lab (https://aka.ms/scriptlab) was developed precisely in this way.

Last I checked, "yo office" -- even if you selected "React" as the option -- was still creating its own custom project rather than leveraging the structure of create-react-app. Personally, I prefer CRA for its project structure and its simplified dependencies and configuration (no webpack configuration to manage, etc.). It's fairly easy to convert a CRA app into an Office Add-in, at least for regular taskpane add-ins (custom functions are a different story, and for that you'd probably still want to keep the "yo office" structure and scripts).

If you're interested in going down the create-react-app route and Office.js-ify it, here are the steps:

Start with the CRA instructions, choosing the TypeScript option (more info at https://create-react-app.dev/docs/adding-typescript)

On top of what it generates, you can go ahead and add Fabric React (for UI) as well as any other libraries. If you want to see what Script Lab uses, see https://github.com/OfficeDev/script-lab/blob/master/packages/editor/package.json, though it might be a tad overwhelming. The most useful super-simple library that's great "bang for the buck" is styled-components, which makes it easier to write your UI by essentially letting you in-line CSS into your JS/React in a very easy way. Script Lab also makes use of Redux and related libraries (typesafe-actions, redux-saga, reselect) which are useful once they are set up, but they might be a overkill for you (esp. if you are learning this as you go). So for now, I would stick with just the basic typescriptified create-react-app + Fabric React + optionally styled components, and call that good.

Once you have a functional website, how do you go from website to add-in? Well, first of all, you add a CDN reference to Office.js (see https://docs.microsoft.com/en-us/office/dev/add-ins/develop/referencing-the-javascript-api-for-office-library-from-its-cdn). Note that even though the rest of your project will be modern modular javascript (and hence import statements, etc.), for the Office.js reference, you'll use a script tag. You'll also want to "npm install --save-dev @types/office-js" to get the latest TypeScript definitions for Office. And speaking of JS, somewhere in your bootstrapping logic (e.g., whatever wraps ReactDOM.render), add a call to "Office.onReady()" -- see https://docs.microsoft.com/en-us/office/dev/add-ins/develop/understanding-the-javascript-api-for-office#initialize-with-officeonready for more info.

Note that when you add the "Office.onReady", you may run into a compile-time issue complaining about "no-undef". As a workaround, just put the comment "/* global Excel, Office */" into the JS file that it complains about, and things will magically work. (More info here: https://github.com/OfficeDev/office-js-docs-pr/issues/691)

Next, you will need to create/add an Office manifest (an xml file describing the URL of your site, the ribbon button arrangement, etc). The file is somewhat cumbersome to work with, but the good news is that you don't need to touch it too often. You can use a similar file to what yo office generates, adjusting paths (e.g., to images) as necessary. You'll likely end up with two or more manifests, one for localhost and one for your production environment... but you can start with just your localhost.

Once you've authored the manifest, you will want to sideload it into Office. For desktop, use the instructions at https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins. For Office Online, use https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing. For Mac, use the instructions at https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac. If it fails to load, it means that you have an issue in the manifest, which happens all the time -- it's a very picky format. In that case, see the troubleshooting steps at https://docs.microsoft.com/en-us/office/dev/add-ins/testing/troubleshoot-manifest.

On a side-note, I'm surprised (and sorry to hear) that you tried to reach out to me by email and didn't get a response. I don't recall seeing an email -- if I would, I would have answered it (at least with a short response redirecting you to StackOverflow :-) ). This is the first I've heard of an email not reaching me. Maybe try again? And I'll check my spam folder too in the next few days, to make sure your new email didn't end up there...

Best!

~ Michael