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

Introduction

The popularity of Microsoft Teams is getting increased day by day, thus the new requirements. Do you know that we can always develop our own web apps and integrate the same to our Microsoft Teams? That is exactly what we are going to do in this blog. Let’s start then.

Background

My plan was to create a web application in Vuejs with Nodejs, and convert the same to Microsoft Team’s web application so that my Team members can use it. There is a generator that helps you create a basic application with some default functionality, but that will support only Angular and react for now (the time that I write this article).

You should also keep in mind that you will have to set up your machine before you start working with “yo generator”. The complete setup can be found here, I am just mentioning it here, even though it is not relevant to this article. So here I will create a Teams App using Javascript SDK and I will connect the same with my Vuejs application later, I will write about that in my next blog.

What we are going to do

We will be doing preceding things in this post,

1. Create an Azure function with Node Js HttpTrigger
2. Customize the Azure function to use static HTML file we upload
3. Generate the Index.html file, config.html file as per Microsoft Teams Web App standard
4. Generate the manifest file
5. Install our new Web App in Microsoft Team

Are you still with me and above mentioned points sounds interesting for you, then let’s develop something.

Create Static Website Using JavaScript SDK

Here we are going to use Microsoft Teams JavaScript client SDK to develop our application. And with the help of these SDK, we can develop a wide variety of applications, some of them are listed below.

• Tabs
• Bots
• Messaging Extensions
• Task Modules
• Webhooks and Office 365 connector

And within the Tab type, we can develop a static Tab application (The tabs that are shown in the left side of the Teams application, here the context will be same for all the users) and a configurable tab application (The tab we can add to any channel, or groups and can be configurable with logged-in users context).

Here we are going to develop a small application that just shows the logged in user email id on our home page. Just remember that this is just a starting blog and the motive of this blog is to give you a walkthrough on how you can develop and install custom apps in Microsoft Teams. To develop the application for Microsoft Teams, we need the below pages.

1. Content Page(index.html), this is the page that displayed in the Tab app
2. Configuration Page(config.html), that used to set the content page

Now open any of your favorite code editors and create two files index.html and config.html and then replace the codes.

Here we are just setting our Tab’s name and then we are calling “microsoftTeams.settings.setValidityState(true)”, at then end the Save button will be enabled for you after the validation. Please remember that you should call “microsoftTeams.initialize()” before you perform any of these tasks.

Here on our content page, we are just getting the logged-in user name and show it to a div element. As simple as that.

Static Website Using Azure Fucntion

The capabilities of an Azure Function is limitless, it is up to you for what the Azure Function can be used. Now we are going to use the Azure function to host a static website.  I hope you have already used Azure Functions, if you have not, you can read some related articles here.

Now go to your Azure portal and search for Function App and create one. Remember to select the Nodejs as runtime stack. Once the function app is deployed successfully go to the Functions tab and click on the plus icon.

From the template section, select the template HttpTrigger and then give a name for your function and set the authorization level to anonymous for now. You should see your function now and we can edit the code now. Go to your function and click on the button Code + Test.

Here is the place where you can edit your function code. Replace the codes with the below one.

Here we are loading our index.html file from the directory “myfiles” and add it as the context body so that the page will be displayed. Save the function and now we can create the folder “myfiles” and upload our pages there. To do that, go to your Azure Function and then click on Advanced Tools and click on the Goto link if it is asked. This will open a new browser tab with advanced tools. You can also visit this page by directly go to https://{yourfunctionname}.scm.azurewebsites.net/. Now click on the Debug console on the menu and then select CMD, go to the folder site -> wwwroot -> folder with the name of your function, this is where you will see the files function.json and index.js. Just click on the + (plus) icon on the top and create a new folder with the name “myfiles”. Go to the folder created and drag and drop your files there (index.html, config.html).

At this point, you should be able to see your index page, when you go to your function URL (https://yourfunctionname.azurewebsites.net/api/triggername?file=index.html), but if you go to the home page of your function by visiting https://yourfunctionname.azurewebsites.net, your index file is not loading right? We can override this by introducing a new proxy to our application.

Go to your Function App and click on the Proxies menu and then click on the +Add icon on the top. Fill the form given, your filled form should look like below.

Once the proxy is updated, go to your function home page and your index page should be loaded with the Team JavaScript SDK now, you can check this in the network tab in the browser console.

Create Manifest for Teams App

Now that our static website is ready, it is time to create a manifest for our team’s application. You can either create this manifest on your own, or you can use the tool called App Studio, here is the well-documented page which explains the features on this application. By using this tool we generate a manifest file by giving the static page files and other information. And at the end of the process, if all the validations are successful, then you will be given options to download the manifest file and install the app to any channel, or teams.

Here is the sample manifest file generated.

If you want to understand the complete structure of the manifest file, here is the link.

Install the Teams App in Teams

If you choose the option of downloading the manifest file, here is how you can install it. Click on the three-dot on the static tabs in Teams and then click on the More Apps link.

Now click on the “Upload a custom app” link at the bottom and then select your manifest zip file downloaded, it will contain the manifest.json file and other related files. Clicking on the “Add to a team” button on the next screen will start the process.

In the next screen, select the channel you want to add this Tab App, and then click on the “Setup a tab” button. Once it is installed, you should see your email if you go to your Tab Application.

Conclusion

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

1. What are Microsoft Teams Web App?
2. How to create a custom application for Microsoft Teams?
3. How to load a static website using the Azure Function?
4. What is Manifest and how to generate it using App Studio?
5. How to install the Web Apps in Microsoft Teams?

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. In the next post, we will see how we can connect this application to our Vuejs application.

Kindest Regards
Sibeesh Venu