{"id":277,"date":"2022-01-12T15:08:55","date_gmt":"2022-01-12T15:08:55","guid":{"rendered":"https:\/\/blog.citrus-lime.com\/crmc\/?p=277"},"modified":"2022-01-12T15:09:12","modified_gmt":"2022-01-12T15:09:12","slug":"debugging-your-teams-bot-using-ngrok","status":"publish","type":"post","link":"https:\/\/blog.citrus-lime.com\/crmc\/debugging-your-teams-bot-using-ngrok\/","title":{"rendered":"Debugging your Teams Bot using Ngrok"},"content":{"rendered":"\n<p>When we are developing a Bot for Teams using .Net Core, we can publish the code for our Bot into Azure to see our work in action.<\/p>\n\n\n\n<p>But its difficult to attach a debugger when our process is running in Azure.<\/p>\n\n\n\n<p>So if we want to debug our Bot whilst developing to trace its execution or monitor unit tests \u2013 what do we do?<\/p>\n\n\n\n<p>Well, we can use a utility titled Ngrok to temporarily give the Bot running on our Local Machine a public facing WAN Address that Azure can communicate with \u2013 but as the code is still running on our Local Machine, we can trace its execution in our Visual Studio Debugger even as different public processes in Teams and Azure communicate (and so wait for) our Bot running locally.<\/p>\n\n\n\n<p>The following will get this up and going for us:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Get Ngrok<\/h3>\n\n\n\n<p>Download Ngrok from&nbsp;<a href=\"https:\/\/ngrok.com\/\">https:\/\/ngrok.com\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_4AD2EA9D.png\"><img decoding=\"async\" src=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_thumb_316AE763.png\" alt=\"image\" title=\"image\" \/><\/a><\/figure>\n\n\n\n<p>This downloads an EXE file which is our command line way of running Ngrok.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Start our Ngrok Forwarding URL<\/h3>\n\n\n\n<p>Run Ngrok as Admin and enter the following command to open localhost port 3978 publicly:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Ngrok http -host-header=rewrite 3978<\/strong><\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>NOTE:&nbsp;<\/strong>The Port here for 3978 should match the output that Visual Studio is running \u2013 which may vary from machine to machine.<\/p><\/blockquote>\n\n\n\n<p>This will start the mirroring of localhost to a public address \u2013 the console output showing the detail of this in action:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_1F2220A1.png\"><img decoding=\"async\" src=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_thumb_0CD959DF.png\" alt=\"image\" title=\"image\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Point our Web App Bot to our Ngrok Forwarding URL<\/h3>\n\n\n\n<p>Our next step is to point our Azure Bot Channel to the newly created public facing address.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em><strong>NOTE:&nbsp;<\/strong>This will break our Bot whilst it is pointing to our local address and not the real bot address!&nbsp; So this should only be done in a Dev Instance of the Bot, or by creating a 2nd Messaging Endpoint to work with.<\/em><\/p><\/blockquote>\n\n\n\n<p>We can do this by opening our Web App Bot definition in Azure.<\/p>\n\n\n\n<p>Within here, we then navigate into Configuration and look at the Messaging Endpoint setting.<\/p>\n\n\n\n<p>This will typically be an Azure URL based on our Bot App\u2019s Name \u2013 such as:&nbsp;<a href=\"https:\/\/mybusinessbotsso.azurewebsites.net\/api\/messages\">https:\/\/mybusinessbotsso.azurewebsites.net\/api\/messages<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_7A90931C.png\"><img decoding=\"async\" src=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_thumb_6847CC5A.png\" alt=\"image\" title=\"image\" \/><\/a><\/figure>\n\n\n\n<p>We can swap out this URL and replace it with our Ngrok URL. (making sure to use the https address)<\/p>\n\n\n\n<p>Once applied \u2013 now any call to the Bot will be ramped through Ngrok to our locally running of the code, and so captured by the debugger in Visual Studio:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_07F6A623.png\"><img decoding=\"async\" src=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_thumb_0EA9AFA6.png\" alt=\"image\" title=\"image\" \/><\/a><\/figure>\n\n\n\n<p>This allows us to trace the execution and compare our workings to the eventual outcome of our code in Teams.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_7C60E8E3.png\"><img decoding=\"async\" src=\"https:\/\/license.citruslime.com\/cs\/blogs\/crmcs\/image_thumb_511C51DC.png\" alt=\"image\" title=\"image\" \/><\/a><\/figure>\n\n\n\n<p>So we can see the same outcome here, but having traced the working through the debugger.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Is this the best way?<\/h3>\n\n\n\n<p>This gives us a great way of debugging our Bot and has some advantages when it comes to debugging messages from other sources \u2013 say if we are posting to our Bot from Power Automate or Dynamics.<\/p>\n\n\n\n<p>But it comes with some disadvantages.<\/p>\n\n\n\n<p>If we turn off Ngrok then our Bot ceases to function, as it will be looking for a Endpoint Messaging URL that no longer exists.<\/p>\n\n\n\n<p>Similarly it can only really work for one developer at a time \u2013 as the entire instance of the Bot is rerouted to a single workstation. (so again, never use it for a Bot that&#8217;s running for anything other than Development!)<\/p>\n\n\n\n<p>We can work around some of these disadvantages by creating a new Bot Channel Registration and then connecting this Registration to our Local Messaging Endpoint rather than affecting the Bot in Azure.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we are developing a Bot for Teams using .Net Core, we can publish the code for our Bot into Azure to see our work in action. But its difficult to attach a debugger when our process is running in Azure. So if we want to debug our Bot whilst developing to trace its execution<\/p>\n","protected":false},"author":43,"featured_media":88,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[3,4],"tags":[],"class_list":{"0":"post-277","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-crm","8":"category-docdrive365"},"featured_image_src":"https:\/\/blog.citrus-lime.com\/crmc\/wp-content\/uploads\/sites\/30\/2021\/12\/DocDriveSiteimageclouds-scaled.jpg","author_info":{"display_name":"jadesmith","author_link":"https:\/\/blog.citrus-lime.com\/crmc\/author\/jadesmith\/"},"_links":{"self":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":2,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts\/277\/revisions\/279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/media\/88"}],"wp:attachment":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}