Post
Ask Question

Teams Application Testing With Ngrok

Introduction

While developing the apps for teams, ngrok comes in handy. Teams app doesn’t run inside the teams, but rather runs outside of it. Let's try to understand what is ngrok. It provides a tunneling service for the incoming requests from the internet (for example, requests from bot service, graph change notifications, etc) to your local server so that you can test the apps locally.

As a pre-requisite, you need to have VS code installed on your machine. The steps are targeted to Win 10 OS with VS code installed. You can check the references section to install VS Code and setting up ngrok If not done.

Developing Teams Tab, and configuration page

In this scenario, there is no tunneling required. all these requests are outgoing requests. In the case of tabs, configuration page development only, a local loopback connection is needed.

Teams Application Testing With Ngrok

Developing webhooks, message extensions, bots

If there is a team's app for bot channel conversation or post conversation, we need to have responses coming from the Bot services to your team's app to test locally. Usually, the incoming requests from internet services are blocked by a network firewall. At this point, it is hard to test services locally and see how it works before rolling it over to real users. This is where ngrok service becoming handy. In the below diagram we could see how the ngrok allows the incoming requests from the BOT service to your local server. 

Teams Application Testing With Ngrok

To demo this let's open VS code and then create a simple web application with a hello world file. Let's serve the web application using a local web server using an HTTP server in the node and then test the responses from this application.

Steps

Step 1

Go to command prompt and create a Directory called ‘ngrokdemo’ and then open it in visual studio code by inputting the below command,

code .

Teams Application Testing With Ngrok

Step 2

It should open a VS code. here create a new file called ‘index.html’ by clicking on the new file button as shown in the below screen capture.

Teams Application Testing With Ngrok

You should see the resulting structure like below,

Teams Application Testing With Ngrok

Step 3

Now in the index.html just have the following simple HTML code. It basically displays ‘Hello World” on the resulting page.

<html>
 <body>
 Hello, World
 </body>
</html>

You should see the overall code like below,

Teams Application Testing With Ngrok

Step 4

It's time to use the ngrok service. Now let us serve this simple application using an HTTP server in node. In the command terminal in VS code run the following command to serve the application,

npx http-server

it might take a couple of minutes and you should see some messages like below. It displays the IP address where you can access it from your browser.

Teams Application Testing With Ngrok

Step 5

Check the application from your localhost. Since these are served locally, you can either use any of the above Ips are simply use http://localhost:8080. Both should work. Open your local browser (I am using edge for this case) and enter http://localhost:8080.

Teams Application Testing With Ngrok

Step 6

Now let's open this application to the internet by entering the below command in a command prompt window.

ngrok http 8080

Teams Application Testing With Ngrok

It should display the below message, where it says it is forwarding the requests from the HTTP and HTTPS URLs to your localhost.

Teams Application Testing With Ngrok

Step 7

Now let's grab the HTTPS URL and try opening in a new tab and see what happens. It opens up the same ‘Hello World’ application and also it displays the trace of the request in the cmd prompt where you are running ngrok.

Teams Application Testing With Ngrok

Even I can open it on my mobile. This is a huge advantage for testing mobile applications. 

Teams Application Testing With Ngrok

Step 8

Now let’s try using Web Interface URL. This URL display all the trace in ngrok web, which comes real handy in debugging.

Teams Application Testing With Ngrok

Teams Application Testing With Ngrok

Since I am using the free version of ngrok, my trace is active for the next one hr and after that, it gets cleaned up.

Points To Note

  • You may get a question, we could test using the Bot Framework emulator locally, but it will not support some of the features like Messaging Extension, Webhook, and User Authentication.
  • We still need ngrok. Also, most of the modern corporate network implemented zero trusts won’t allow ngrok URLs and you need to test the team’s applications outside your corporate perimeter network.

Conclusion

In a nutshell, we have developed a simple hello world web application and served on the local node and exposed to the internet using ngrok and tested the traces using ngrok response and web interface UI which are useful in Teams Application development.

References

  • https://code.visualstudio.com/docs/setup/windows
  • https://www.c-sharpcorner.com/article/installing-ngrok/
  • https://www.youtube.com/watch?v=A5U-3o-mHD0
  • https://www.twilio.com/docs/usage/tutorials/how-use-ngrok-windows-and-visual-studio-test-webhooks
  • https://superuser.com/questions/284342/what-are-path-and-other-environment-variables-and-how-can-i-set-or-use-them
  • ngrok - secure introspectable tunnels to localhost


Similar Articles