Skip to content
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

Closed
dougdew opened this issue Mar 8, 2017 · 18 comments
Closed

ReactJS support, Office UI Fabric for ReactJS support #225

dougdew opened this issue Mar 8, 2017 · 18 comments

Comments

@dougdew
Copy link

dougdew commented Mar 8, 2017

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?

@beth-panx
Copy link
Member

@dougdew We have react template implemented. Want to give it a try?

@dougdew
Copy link
Author

dougdew commented Mar 28, 2017

@beth-panx Absolutely I would like to give it a try!

@dougdew
Copy link
Author

dougdew commented Mar 29, 2017

@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:

  1. After outputting the "Congratulations! Your add-in has been created!" message with the next steps, the generator did not terminate. Instead, I had to CTL-C to terminate.

  2. The certificate for the add-in was not trusted by my browser, which seemed surprising given that I had already trusted the certificate for the office generator that is available via NPM. I'll have to investigate this.

  3. I received a 404 for favicon.ico

  4. Nothing was visible in the body of the add-in

@dougdew
Copy link
Author

dougdew commented Mar 29, 2017

From what I can see in the Chrome debugger the call to main is not happening for these lines of code:

Office.initialize = () => {
main();
};

@dougdew
Copy link
Author

dougdew commented Mar 29, 2017

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.

@beth-panx beth-panx reopened this Mar 29, 2017
@beth-panx
Copy link
Member

@dougdew There was some small bugs we found yesterday with it. All great finds you mentioned above.

  1. I am aware of that happens sometimes. I think it has something to do with node process sending data in the background. Could you share what OS and version of node and npm you are using?

  2. I am not sure about this one. It had been working for me fine. Did you trust it in the management console/key chain access?

  3. We don't have a favicon right now :p up to you to add it.

  4. This is the bug we found later yesterday. Sorry for not responding in time. Should be fixed now. Although the body of the addin will not show up until you sideload it in a client. Office.initialize will only be called in a client.

@dougdew
Copy link
Author

dougdew commented Mar 29, 2017

@beth-panx Thanks! I'll try again tonight after work.

@dougdew
Copy link
Author

dougdew commented Mar 30, 2017

@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.

  1. The error for the use of "async" for a build target that is not es2015 or later is still present. I recommend updating the build target.

  2. There are many console errors for ERR_INSECURE_RESPONSE, failed to load sockjs-node/info

  3. There's a spinning "Loading" circle in the add-in that does not terminate. Is that "Loading" circle related to the sockjs-node stuff that failed to load?

@dougdew
Copy link
Author

dougdew commented Mar 30, 2017

@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!

@beth-panx
Copy link
Member

@WrathOfZombies is the main contributor to this template! 👍 Glory is all his.

@dougdew
Copy link
Author

dougdew commented Mar 30, 2017

Thank you very much @WrathOfZombies !

@WrathOfZombies
Copy link
Contributor

@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.

@dougdew
Copy link
Author

dougdew commented Mar 31, 2017

@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.

@dougdew
Copy link
Author

dougdew commented Mar 31, 2017

@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.

@WrathOfZombies
Copy link
Contributor

@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.

@WrathOfZombies
Copy link
Contributor

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:

  1. Download and install the Edge Debugging extension for VSCode
  2. Download the IE Diagnostics Adapter from here
  3. Modify the source of the Edge Debugging extension to launch the IE Diagnostics Adapter instead of the Edge Diagnostics Adapter
  4. Configure VSCode debug options add the complete specific launch url including the parameters injected into the url by Office.js. To make it easier to test the connection use the 'verbose logging' option.
  5. After this the debugger should attach successfully attach but keep in mind that it can be quite flaky and all the symbols don't load up correctly.

@WrathOfZombies
Copy link
Contributor

Here's some documentation for the same: https://dev.office.com/blogs/attach-debugger-from-the-task-pane

@dougdew
Copy link
Author

dougdew commented Apr 11, 2017

@WrathOfZombies Thank you very much for the explanation and the detailed help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants