-
Notifications
You must be signed in to change notification settings - Fork 209
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ReactJS support, Office UI Fabric for ReactJS support #225
Comments
@dougdew We have react template implemented. Want to give it a try? |
@beth-panx Absolutely I would like to give it a try! |
@beth-panx I cloned this repo, built and npm-linked to the built code. Then I ran "yo office" to create a react-based add-in. I encountered these issues:
|
From what I can see in the Chrome debugger the call to main is not happening for these lines of code: Office.initialize = () => { |
According to VS Code, the use of "async" in app.tsx is only supported for a build target of es2015 or later. I changed the "target" setting in tsconfig.json to "es2015" and the red squigglies under the "async" keywords went away. |
@dougdew There was some small bugs we found yesterday with it. All great finds you mentioned above.
|
@beth-panx Thanks! I'll try again tonight after work. |
@beth-panx I pulled the latest versions, created an add-in, built the add-in and then ran the add-in. There are fewer errors than there were yesterday.
|
@beth-panx I just side-loaded my add-in into Excel 365 and the spinning "Loading" circle went away. Instead, I received the full and correct text of the add-in. As I recall, when using the plain vanilla (jquery) add-in generator I did not have to side load in order to get the full and correct text of the add-in. At any rate, I am very happy. Thank you very much for making this available! |
@WrathOfZombies is the main contributor to this template! 👍 Glory is all his. |
Thank you very much @WrathOfZombies ! |
@dougdew Thank you. Glad that you are liking it. A couple of points to note. The react template is built a little differently and involves the use of webpack which, based on feedback would help folks to get to production with bundling and minification among other things. Hence there are two sets of certs to be trusted. One from https://localhost:3000 (brower-sync) and one from https://localhost:3100 (webpack-dev-server) The project was built keeping React in mind and there's a solution that is being proposed to determine whether the code is running inside of an Add-in or not. When that solution is in place, we can update the template to ensure it runs everywhere. Since the jQuery code, doesn't involve any components or a spinner it works in the browser immediately. |
@WrathOfZombies I am very happy to read that you've chosen to use webpack. I would absolutely love if this template was aligned with Facebook's create-react-app. If this template could somehow build upon or improve upon Facebook's create-react-app so that typescript is used instead of javascript (as is currently used by create-react-app), that would be great. |
@WrathOfZombies Also, I'm using VS Code. I'm hoping eventually to be able to conveniently debug Office Add-Ins from within VS Code, just as I can today from within Visual Studio. |
@dougdew: We had to stray from the create-react-app as the goals were different. Facebook's goal is to help people learn and get on the react platform. Our goal is to help Add-in developers be productive throughout the life-cycle. That said i'll let @beth-panx evaluate this. |
From my experience, the best experience with Office development that VSCode can offer is allowing breakpoints to debug, but in order to get to that experience a whole bunch of hoops need to gone through. Alternatively, I think for any developer its a lot easier to download Visual Studio 2015 Community Edition and use the "Attach Debugger" option in the menu options for the active Add-in. (there's a small arrow [on windows], ['i' on mac] that you can click to show the options) TLDR; If you are curious about the VSCode debugging then here are the steps:
|
Here's some documentation for the same: https://dev.office.com/blogs/attach-debugger-from-the-task-pane |
@WrathOfZombies Thank you very much for the explanation and the detailed help! |
Will support be added for ReactJS and Office UI Fabric for ReactJS? If so, is that planned for this year? If not, what should we use to generate such projects?
The text was updated successfully, but these errors were encountered: