Outlook Web-App with React, NPM and Debug - node.js

I want start to implement an Outlook 365 Web Add-In.
After all, I decided to create it with React.
I already tried to set up some project's but all of them have a lot disadvantages:
Visual Studio 2017 Office 365 Outlook Project:
Pro:
Client debugging support (quite important)
Con:
As it's a Web-Project, hosted by IIS, I cannot work with NPM (YARN) and Webpack (without lot of frustration) and compile ES6, JSX code to ES5 and debug that stuff
Visual Studio Code:
Pro:
Node and NPM Support
Can easily work with React and ES6/7/JSX
Contra:
No debugging support for client side
Question
However MS has written in it's own documentation that till this day we're unable to debug JS-Code with Visual Studio Code in Outlook, is there maybe an comfortable alternative to do it?
I don't want to give up work with React and ES6 so is there a way to do it with VS-Web Projects and IIS?
What is in your opinion the best work flow for my needs?
Thank's!

There is a middle ground where you can use VS Code but still have decent (albeit not quite as tightly integrated as in VS debugging). The trick is just to make sure that you have Visual Studio, but it needn't be a VS project that you are debugging:
If you are on Outlook for PC / Desktop: See https://dev.office.com/blogs/attach-debugger-from-the-task-pane. The article shows you how to attach in the context of Word, but the same applies to Outlook (and instead of using the "Personality Menu", you can just right-click and see the same "attach debugger" option).
If you are debugging a web version of Outlook, that's even easier: just open up your browser's F12 tools.
Hope this helps!

Related

How to debug an Excel Add-In created using Yeoman, running IE in Windows 8

I created an Office Add-In using the Yeoman generator, I chose the React add-in and I was able to make it run properly within VS Code by following this tutorial:
https://learn.microsoft.com/en-us/office/dev/add-ins/tutorials/excel-tutorial
The react boilerplate includes a piece of code which logs an action to the console, but I see no console anywhere. According to the documentation, since my version of Office is 2016 volume licensed, I'm running Internet Explorer, and since my Windows system is 8.1, I can't use the F12 tools nor the Microsoft Office Add-In Debugger, so how do I view these logs like I do when I develop web applications for other browsers like Chrome and Firefox?
I followed the instructions in this guide by microsoft:
https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-tools-ie
Now, for what I understood, the only option I'm left with is to "Switch to the Internet Explorer 11 webview". So I ran the command npx office-addin-dev-settings webview manifest.xml ie in the terminal and it returned "The web view type is set to Microsoft Internet Explorer". Then when I go ahead and type npm start, the add-in loads correctly but I still can't see any dev tools.
I did try something else by going to the Run and Debug tab in VS Code, choosing the option "Excel Desktop (Edge-Legacy)", running the command npx office-addin-dev-settings webview manifest.xml edge-legacy, modifying the launch.json file so it didn't complain but I saw no difference.
I was able to have bridge chrome and edge devtools using the IEDiagnosticsAdapter, but nothing appears in the console, so I think it's unsupported.

Breakpoints not triggering in VSTO Add-in

I was made aware of an interesting situation by my client today. I am sure it is something simple but seems like I can't put my finger on it. Have never faced this issue and Google has not been too helpful.
Problem
On my client's laptop, the Add-In is created with Add-in Express™ for Microsoft® Office and .net. When running the Add-in from VS, the breakpoints do not trigger. I logged in via teamviewer. We created a new test project (Add-in) and added this simple code.
Private Sub AdxExcelAppEvents1_WorkbookOpen(sender As Object, hostObj As Object) Handles _
AdxExcelAppEvents1.WorkbookOpen
MessageBox.Show ("Hello World")
End Sub
I put a breakpoint on AdxExcelAppEvents1_WorkbookOpen and ran. I got the message when I opened a new workbook but the breakpoint did not trigger.
I tested the same code on my laptop and it works just fine.
What has he and I tried
Unregister, Clean + Rebuild, Register
Manually cleaning the Debug folder
Repairing Add-In Express
Uninstalling/ReInstalling Add-In Express
Jumping between frameworks 4.5 and 4.6, 4.7.1
Toggling Tools | Options | Debugging | General require source files to exactly match the original version
Toggling Solution platforms (x86|64|AnyCPU)
Applications
Visual Studio Version: 2019 Pro
MS Office: 2016 Professional Plu 2016
Let me know if you need anything else?
FYI: This has been crossposted at Add-in Express forum I usually do not crosspost but seems like my client is under pressure and has to deliver this project on monday morning.
You can use the method Debugger.Break from System.Diagnostics and observe if you get more information about a plausible unhandled exception. In this case, we get the exception wkernelbase.pdb not loaded and Siddharth found it can be fixed by selecting : Tools->Options->Debugging->Symbols->Select "Microsoft Symbol Servers".
I suppose there's an {excel}.exe.config file in the Office folder. The .config requires all add-ins to use .NET 2.0 (3.0, 3.5).
That would explain the issue: you use .NET 2.0 (3.0, 3.5) while the debugger expects to use .NET 4.0 (4.X).
And yes, Add-in Express is built around the COM Add-in technology, not VSTO Add-in.

Debugging Meteor app with NTVS (Node Tools for Visual Studio)

I'm investigating using NTVS (https://nodejstools.codeplex.com/) with Visual Studio 2013 to debug my Meteor/Node application. I can't figure out how to get debugging to work.
The problem is that when Meteor starts it copies all of my sources to the .local directory and runs them in a new instance of Node.exe. This confuses NTVS because it can't follow on into the child process. And I can't set breakpoints because Visual Studio doesn't know how to deal with the fact that the files I am editing being different than the ones that are running in the .local directory.
What I'd like is some way to run my Meteor based code under Node.exe straight from my sources, without the pre-bundling steps. Is this possible?
I'm fine with not having development niceties like hot-code pushing and package updates on-the-fly. I can manage that in other ways.
'meteor bundle' doesn't do the trick because (a) it takes too long and (b) it still makes the copy that throws off breakpoints.
Hopefully there is a way to use Meteor as an awesome library separate from Meteor as a runtime environment so I can debug it with NTVS.
Thanks,
/Michael Ost
if the functionality of the meteor tools for Visual Studio are not sufficient, why not contribute to the project.
It's a bit old (last commit 18 months ago) and hence probably outdated, but it will give you a head start as to how to make things work.
You can run your app in debug mode using meteor debug and then attach debugger to port number 5858, It should work for all type of node.js debuggers e.g. Visual Studio, Visual code, Webstorm etc because they all have "attach" debugger option next to "debug" option.

visual studio express 2012 version control

I have been sent a working project from a coworker to start learning Visual Studio. The project is under version control, however I don't want to have access to final customer product. So when I try to open the solution file I first get a message that the project is under source control:
"Team Foundation Server Version Control
The solution you are opening is bound to source control on the following Team foundation Serer:
http:// . Would you like to contact this server to try to enable source control integration?"
[yes] [no] [help]
I press no, then I get an error:
"The solution appears to be under source control, but its binding information cannot be found. Because it is not possible to recover the missing information automatically, the projects whose bindings are missing will be treated as not under source control."
[ok] [help]
I proceed and press ok, and another message pops up:
"projectname\projectname.tsproj: The application which this project type is based on was not found. Please try this link for further information: http://go.microsoft.com/fwlink/?prd=12395&pver=11&sbp=ProjectTypeDeprecated&plcid=0x409&clcid=0x409&ar=MSDN&sar=ProjectCompatibility&o1=B1E792BE-AA5F-4E3C-8C82-674BF9C0715B"
My coworker tells me he sent the whole project, so I can't figure out why I cant get visual studio to open it. I am new to visual studio, but I have some programming experience.
Any help is much appreciated.
Thank you
It is doubtful that version control has something to do with your problem. There are two possibilities I could think of:
Your coworker uses full version of VS2012 and you are now having problems due to the fact that Visual Studio Express comes in two main flavours - Web and Desktop. It is unable to load Web(or Desktop) project because it just does not have any tools to work with it. Ask your coworker whether they mix web and desktop in their solutions. If it is so you should either use full VS or be given a reduced set of projects.
Nearly the same - your coworker uses some very old or very new version of particular project type (something like ASP.NET MVC that(as I remember) has different project type for each version). Again ask your coworker if it is so. In this case you will just have to install the needed templates and SDKs.
P.S. I was unable to open your link - it opens microsoft.com/default(maybe due to some regional problems). Search by key words brought to me similar problem for VS2010 http://connect.microsoft.com/VisualStudio/feedback/details/728847/could-not-open-vs2010-solution-with-mvc-project - may be it could help you more specifically.

Starting Development for Google Chrome....Getting Started Issues!

Our organization has decided that my project will be developed for internal use with the Google Chrome browser. So yesterday I started looking around the internet for just how I would go about doing that.
I found the WebKit.org development tool and have been trying to install it using the instructions found here:
http://webkit.org/building/tools.html
I am installing on a Windows machine that does not have Visual Studio 2005, so following the directions I downloaded Visual C++ Express 2005. Now I am at:
Install the Windows Server 2003 R2 Platform SDK, then follow steps 2 and 3 of “How to: Use Visual C++ Express Edition with the Microsoft Platform SDK.”
Except I can't follow steps 2 and 3 because when I go to try and run the program all I have in the menu is:
Start -> Programs -> Visual C++ 2005 Express Edition -> Visual Studio Tools -> Visual Studio 2005 Command Prompt
which opens a command prompt.
Can anyone tell me what I've done incorrectly?
Additionally, do you HAVE to develop in WebKit? Or is that just the best way to work with the Chrome engine?
Thanks!
Leslie
You shouldn't need to 'build chrome'
If you need anything special, the Chrome Extension framework is pretty awesome: http://code.google.com/chrome/extensions/overview.html
But I imagine if you are moving from IE to Chrome, as a client for a webapp, things should just work.
Leslie,
I found this Google I/O talk to be useful as an intro.
step 2 and 3 are on Microsoft's web site referred in the building instructions. The steps describes steps you need to do after opening Visual C++. If you have only the command prompt in the Visual Studio start menu folder, reinstall your Visual C++ Express edition.
I don't think writing your own webkit-based browser satisfies your decision to use the Google Chrome browser. By the way. From your limited description of your requirement I don't see why it cannot be a B/S application. If you have too many C++ code to port to web, you can try host Google Chorme Frame as an ActiveX. I am not sure if this is the best approach for you, since it does not have any API documentation for developers.
Writing a browser based app could mean:
You run code (perhaps in .Net, Java, Ruby, PHP, Python, etc...) on a server with potentially Javascript, flash, etc... running in the browser. The browser communicates with the server through HTTP requests. If that is the case you certainly don't need to worry about installing webkit.
It could mean writing a Chrome extension which would again likely mean running .Net, Java, Ruby, Python, PHP, or some other language of your choice on the server and Javascript in the Chrome extension. Again in this case there is no need to install webkit.
It's possible it could mean writing an app based on webkit, but that would be replacing your old desktop app with another desktop app which doesn't seem likely. With this solution, you are no longer running Chrome, but your own custom made browser. Not to mention this seems like overkill for a jury management system.
I would guess you want to do option 1. That is typically what people mean by a browser based app. It would be a much better use of your time to read a book on web development than to fool around with webkit.
You should find the executable file to launch Visual Studio Express in this folder: "C:\Program Files\Microsoft Visual Studio 8.0\Common7\IDE\"

Resources