Context:
For a client we would like to develop an Office Web add-in with Microsoft's Fabric UI. The Office Web add-ins function as webpages that can be displayed within Office Applications. Interaction with the Office content (document/workbook/sheets) is done through the Javascript API (Office.js). In order to save time and ensure that the add-in has the same look and feel as the Office Application, Fabric UI is used. Fabric UI consists of a bootstrap like package and some ready to use components like textfields, buttons and dialogs. The Fabric UI is offered in a React form and a vanilla form.
The Problem:
Visual Studio 2017 (in combination with the Office Developer tools) offer a number of templates in order to develop these add-ins. These templates set up the solution in such a way that you can debug the Office application right from Visual Studio itself. Which I consider a big advantage. However, these templates do not allow for an easy way to incorporate the React version of Fabric UI. I am aware that the Yeoman generator can also generate a template (for use in (other) text editors), but from what I can tell this project can only be debugged through sideloading the plug-in. The latter would be very unhandy.
Through Nuget packages the non-React version of Fabric UI can be implemented. This means that the base .css and .js files can be imported, but that there is no easy way to use the components. Every time a component is implemented all the html, css and javascript of that component needs to be copied and pasted manually into the project. Therefore I am searching for a way to incorporate the React version of Fabric UI in the Visual Studio template for an Office Add-in. Unfortunately the React version of Fabric UI is only offered through Node Package Manager (npm) and thus cannot be easily implemented in the Visual Studio template.
The template consists of a manifest file and a modified ASP.Net Web Project.
The solution I am looking for:
I am looking for a way to add React Fabric UI to the modified ASP.Net (Office Web Add-in) project. This would likely mean that (1) React needs to be installed in the ASP.Net project. (2) Fabric React UI needs to be installed in the ASP.Net project. I presume that both installations need to be done through Visual Studio Node.js tools, but I am unclear how to do this. (3) Custom build actions need to be defined to compile the .jsx to javascript. On this part I am also unclear.
Additionally I am unsure of the problems this might cause and am doubting on whether I should just stick to copying the individual components. If someone has some answers of advice, that would be greatly appreciated.
Related Stackoverflow Questions
I have found a couple related questions, but none are answered.
Question 1, Question 2, Question 3
Update 1:
I found a tutorial for a Sharepoint app, which seems to do what I require. I will work on this tonight and tomorrow. If I am able to make this work, I will report back with a solution.
Update 2:
Unfortunately I was not able to follow the steps of the tutorial. Many of the steps described, did not correspond to my development environment. My guess is that this has to do with some breaking changes in the way the templates of both Node.js and Office have been set up.
At the moment I am following another strategy. (1) I will create a new Office Add-In Web project through a generator or other means. (2) I will adjust the manifest project so that it is linked to the new project, rather than the generated standard ASP.Net project.
Will keep you guys updated!
Update 3: We got it working by using the .NET Core React project and adjusting the manifest. It is not possible to link the .NET Core React project to the manifest project, because the properties expect a ASP.NET project. This means you need to specify both the manifest and .NET Core React project as startup projects. A more elaborate explanation with the steps will follow later this week.
Note: So far we can debug the Office add-in from within Visual Studio.
