officedev / word-add-in-gettingstartedfabricreact

[ARCHIVED] Get started using Office UI Fabric React in an Office Add-in.

[ARCHIVED] Get started with Office UI Fabric React in Office Add-ins

Note: This repo is archived and no longer actively maintained. Security vulnerabilities may exist in the project, or its dependencies. If you plan to reuse or run any code from this repo, be sure to perform appropriate security checks on the code or dependencies first. Do not use this project as the starting point of a production Office Add-in. Always start your production code by using the Office/SharePoint development workload in Visual Studio, or the Yeoman generator for Office Add-ins, and follow security best practices as you develop the add-in.

Using Office UI Fabric React to build the UX of your Office Add-in ensures that your add-in looks like a natural extension of Office. This sample demonstrates how to use Office UI Fabric React components in an add-in.

Table of Contents

• Change History
• Prerequisites
• To use the project
• Questions and comments
• Additional resources

Change History

May 09, 2017:

• Initial version.

Prerequisites

• Word 2016
• Node and npm, version 6.9.4 or later.
• Git Bash (or another git client.)

To use the project

1. Clone this repo.
2. Open a Node.js command prompt in the root folder of the project.
3. Run npm install to install all dependencies.
4. Run npm start to start the project. A browser window opens showing a partial UI.
5. To see the full UI, open Word and sideload the manifest. For more information, see Sideload Office Add-ins for testing.

To understand how the project files are set up, and to learn how to create your own project using these components, see Use Office UI Fabric React in Office Add-ins.

Questions and comments

We'd love to get your feedback about this sample. You can send your feedback to us in the Issues section of this repository.

Questions about Microsoft Office 365 development in general should be posted to Stack Overflow. If your question is about the Office JavaScript APIs, make sure that your questions are tagged with [office-js] and [API].

Additional resources

• Design guidelines for Office add-ins
• Office add-in documentation
• Office Dev Center
• More Office Add-in samples at OfficeDev on Github

Contributing

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Copyright

Copyright (c) 2017 Microsoft Corporation. All rights reserved.

word-add-in-gettingstartedfabricreact's Issues

How do you debug in an IDE?

Visual Studio has a template for a Word web add-in. Clicking 'Start' opens Word with the add-in loaded, and allows for immediate debugging of the front-end javascript in the IDE.

Word was running the add-in in ie11.

With this project, the only options I've found are debugging with 'f12' debugger located in C:\Windows\SysWOW64\F12\IEChooser.exe (or System32).

I installed the latest version of windows to get access to the new Windows Terminal. This update also switched the Word add-in to load in edge instead of ie11, which requires the new Microsoft Edge Developer Tools.

I would like to get access to the functionality Visual Studio provides for debugging front-end code via an IDE instead of f12/edge developer tools. I cannot find out how Visual Studio allows this debugging as all of the properties are hidden away as settings in .sln and web.config etc.

Is there any way to debug this add-in with Visual Studio/vscode (preferrably vscode)?

Errors...

Hello,

Just trying to get familiar with this development, but when installing dependencies I get the following errors:

gyp verb check python version `C:\Users\Daniel\AppData\Local\Programs\Python\Python36-32\python.EXE -c "import platform; print(platform.python_version());"` returned: "3.6.5\r\n"
gyp verb could not find "C:\Users\Daniel\AppData\Local\Programs\Python\Python36-32\python.EXE". checking python launcher
gyp verb could not find "C:\Users\Daniel\AppData\Local\Programs\Python\Python36-32\python.EXE". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT
HON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\Daniel\Documents\Add-i
n\Word-Add-in-GettingStartedFabricReact\node_modules\node-gyp\lib\configure.js:4
83:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Daniel\Documents\Add-in
\Word-Add-in-GettingStartedFabricReact\node_modules\node-gyp\lib\configure.js:50
8:16)
gyp ERR! stack     at C:\Users\Daniel\Documents\Add-in\Word-Add-in-GettingStarte
dFabricReact\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:165:21)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Daniel\\Docum
ents\\Add-in\\Word-Add-in-GettingStartedFabricReact\\node_modules\\node-gyp\\bin
\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--lib
sass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Daniel\Documents\Add-in\Word-Add-in-GettingStartedFabricRe
act\node_modules\node-sass
gyp ERR! node -v v10.1.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

I installed Node v10.1 and tried installing Python 3.6.5 but still the same error... thoughts?