Prerequisites

1. You will need Python installed on your machine
2. You will need to create a Team and a channel in the Team

Setting up a channel

Creating a channel

You will need to set up Teams before you create a channel, and if you have enough access, it is an easy thing to do. Once the Team is ready to use, you can either use one of the existing channel, or create a new one from the context menu.

Setting up the connector

When you have decided which channel to use, click on the three dot on the right-side of your channel name, and then click on the Connectors and then search for the connector “Incoming Webhook” and then click on the button “Add”.

The above process might take a few minutes. If you are unable to perform this, you can try using the web version of Microsoft Teams.

Use of web verstion of Microsoft Teams

The above step will add the connector to your Teams, so that you can start configuring your Webhook. Click on the Configure button.

Provide a meaningful name for your Webhook and upload an image if required. Finally click on the Create button. A unique Url will be generated for your Webhook. Copy the Url and save it somewhere, we will later add this to Azure Key Vault and use from there. Click on the Done button. Your Webhook now should be shown as configured.

Post Message Using the Connector

Setting up Azure Key Vault

Configuring the Azure Key Vault is as easy as you set up any other Azure Resource. You may get the steps required from this post or this. Add a new secret and paste the Webhook Url value you copied earlier.

Make sure that you had set up the Access Policies on your Azure Key vault.

Access Policy

Copy your Azure Key Vault name and the Secret name, we will use this in our Python function.

Setting up Python Application

Let’s set up our Python application. Create a directory msteams-webhook and create a file requirements.txt with the preceeding contents.

pymsteams[async]
azure-identity
azure-keyvault-secrets

Now run the commands below to create a virtual environment, activate the environment and then install the requirements in our environment. If you get a message like “WARNING: You are using pip version 19.2.3, however version 22.2.2 is available.”, you can upgrade pip by running the command python -m pip install --upgrade pip

py -m venv .venv
.\.venv\Scripts\activate
py -m pip install -r requirements.txt

You can learn more abou the Virtual Environment here.

Python Virtual Envrronment

Get the Secret from Azure Key Vault

Let’s create a new Python file keyvault_helper.py with the codes below.

Send Message to Teams Channel

To send a message to the Teams channel, we are going to use a package pymsteams. This has been already added to our requirements file. Let’s create a file notify_teams.py with the codes below.

As we have all the set up done, let’s create main.py file with the codes below to start sending the messages to the Teams channel.

Before you run the main file, make sure that you have logged in to the terminal using az login with the account that you had set the access policy in your azure key vault. We can also set this access policies by using a managed identity, or a service principal, so that we can use it for more production scenarios. But for this post, let’s stick with a user account.

If you get the error, VisualStudioCodeCredential: The current credential is not configured to acquire tokens for tenant or SharedTokenCacheCredential: The current credential is not configured to acquire tokens for tenant you can set the values  exclude_shared_token_cache_credential=True or exclude_visual_studio_code_credential=True when you get tokens using DefaultAzureCredential in your get_key_vault_secret function in keyvault_helper.py file.

Keyvault Error

By this time, we can hope that you will be able to get the secret from the key vault and now we can execute py .\main.py file. Once the file is executed, you should get a response in your cli as preceding.

{"version":"1.1","content":{"headers":[{"key":"Content-Type","value":["text/plain; charset=utf-8"]}]},"statusCode":200,"reasonPhrase":"OK","headers":[],"trailingHeaders":[],"requestMessage":null,"isSuccessStatusCode":true}

You should also get a message on your Teams channel.

Source Code

You can also see the codes in this repository.

About the Author

I am yet another developer who is passionate about writing and video creation. I have written more than 500 blogs on my blog. If you like this content, consider following me here,

• GitHub
• medium
• Twitter

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.

Kindest Regards

Sibeesh Venu

Introduction

The Microsoft Teams Yeoman generator is an amazing tool to develop applications for your Microsoft Teams, but it is not capable to work with Vuejs yet. I wanted to develop my application in Vuejs, so I created a Microsoft Teams app using Teams JavaScript SDK as I explained in my previous post. This blog is a continuation of the previous post, so please read that to get an idea of what we are going to develop in this blog post.

Background

In our last post, we developed,

1. a Microsoft Teams app with JavaScript SDK
2. an Azure Function to serve the static file as a website
3. Generate the manifest file for our Teams Application
4. Install the App in Teams

And in this post we will be doing,

1. Create a sample Vuejs application
2. Connect our Microsoft Teams application with Vuejs application, at the end both are JavaScript right?
3. Create a new Web App in the Azure portal
4. Create Build pipeline for our Vuejs application
5. Create a release pipeline for our Vuejs application

So do you like any of the point mentioned above? If yes, please stay with me till the end.

Develop Microsoft Teams App with Vuejs

Setup Vuejs and create a new project

The first thing to do is to install the Vue CLI on our machine, and you can do that by running the preceding command.

npm install -g @vue/cli

Please read the installation guides here, if you want to know it in detail. Once that is done, now is the time to create our first vuejs application using this command.

vue create hello-world

You will be asked to select your preset, I select the default one, that is (babel, eslint). In the end, you will be given a beautiful, small Vuejs application. Easy right? As the motive of this blog post is not to talk about the Vuejs application, I won’t go in detail about it.

Connect both Tab Apps and Vuejs app

The Vuejs application has a folder called Public, and this is where we paste the files of our Teams Tab App. So now your public folder should look like below.

Now open the Index.html file in the public folder and update the codes with our Tab App’s Index.html file, please remember that we are just adding some codes here, not replacing the complete HTML. Here is the complete Index.html file content.

I have explained the Tab App’s code in my previous post, so reading that is still a good idea. Now let us go see the content of the config.html file, we are going to do some changes here. As I combined both Vuejs application and out Teams Tab app to one single application I thought to create an Azure Web App to host this application, instead of doing it with an Azure Function App as we did on the first blog. So here is your config.html file.

The only change that I did is changing websiteUrl, contentUrl in the code. We will be creating this website soon, no worries. We will have to do the changes in the manifest.json file too. Here is your manifest file.

Please be noted that we have changed the configurationUrl and add our new URL to the validDomains. This step is very important.

Create a Build Pipeline for Our App

To create a build pipeline, go to your Azure DevOps and select your project, and then click on New Pipeline after clicking on the Pipelines section. You will be asked to select your repository and the pipeline configuration. As a configuration, select Node.js with Vue.

And in the section “Review your pipeline YAML” replace the content with the below codes.

Now all you have to do is to click Save and run button. You can already see that we are building our application, copying the artifacts from the dist folder to Build.ArtifactStagingDirectory and then publish it with the name www. Sounds good? So once the build is successful you should see your artifacts as preceding.

Do you remember that we placed all of our Tab App related contents in the public folder of the Vue app? The artifacts generated will have those files too. Now we need to set up our Release pipeline, but before that, we should create an Azure Web App in the Azure portal.

Create an Azure Web App

Creating an Azure Web App is really straight forward, I am sure that you will be able to create one. Click on the New Resource and then search for Web App, provide all the information in the form you get now. Once everything is filled, review, and create. That’s it. Remember to give the resource name as the name we gave in the manifest.json, config.html files.

Create a Release Pipeline for Vue App

As we already have an artifact ready, it is time to create a release pipeline. Go to the Pipelines section in your Azure DevOps and click on Releases, and then click on +New Release Pipeline. Now select the artifacts you have, and select the Task Azure Web App Deploy.

And here is how your Task should look like.

Now click Save and run a new release. And if you check the release log, if everything goes well, this is how it should be.

Now you should be able to visit your Azure web application and make sure that the index.html, config.html works fine. Because in our next step we are going to install our App in Teams.

Install the Vue Tab App

Now go to the public folder in your Vue application and select the files manifest.json, color.png, outline.png, and right click and create a Zip file. We will be uploading this Zip file in our Teams. If you are unsure how to do this, I have already explained that in our previous blog. Once after the installation, go to your Tab app and I am sure the Vuejs application will be loaded in the tab.

Conclusion

I hope this post was useful and you have learned the below things.

1. How to create a Vuejs application?
2. How to connect a JavaScript SDK Team Tab application with Vuejs app
3. How to create an Azure Web App?
4. How to create Build Pipeline for Vuejs app in Azure DevOps?
5. How to create Release Pipeline for Vuejs app in Azure DevOps?
6. How to install the new Vuejs Team Tab app in Microsoft Teams?

There is also another way of doing this with the Generator SPFX , this will help you create the SharePoint web part in Vuejs and the same can be added to the Microsoft Teams as explained in this blog. I may write about this on my next blog. Stay tuned.

Source Code

Please feel free to check out the repository here.

About the Author

I am yet another developer who is passionate about writing and video creation. I have written close to 500 blogs on my blog. And I upload videos on my YouTube channels Njan Oru Malayali and Sibeesh Passion. Please feel free to follow me.

• GitHub
• medium
• Twitter

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.

Kindest Regards
Sibeesh Venu