eTrk Teams Plugin Installation

Overview

Microsoft Teams is a collaboration platform that allows teams to communicate, share content, and work together efficiently. Teams development involves building custom apps, bots, messaging extensions, and connectors to enhance the Teams experience for users.

Prerequisites

Before getting started with Teams development, ensure you have the following:

Clone the Repository

git clone https://github.com/Kumaran-eTrk/TeamsApp.git

Start run your Teams app

  • First, select the Teams Toolkit icon on the left in the VS Code toolbar.

  • In the Account section, sign in with your [Microsoft 365 account].

  • Navigate to Microsoft 365 Agents Toolkit and choose Create a New Agent/App.

  • Select the Teams App.

  • Select Tab with React and Fluent UI.

  • Choose TypeScript as the programming language.

  • Specify the project name and location to create the app.

  • Ensure that your app is running and accessible using HTTPs.

    • Install mkcert globally using npm:

      npm install -g mkcert

    • Create a Local Certificate Authority (CA):

      Generate a local Certificate Authority (CA) that will be used to sign your SSL certificates:

      mkcert create-ca --organization "MyOrg" --validity 3650

      —organization: Sets the name for the CA (e.g., your company or project). –validity: Number of days the certificate is valid (e.g., 3650 days = 10 years).

    • Generate a Local SSL Certificate Using the generated CA, create an SSL certificate:

      mkcert create-cert --ca-key "ca.key" --ca-cert "ca.crt" --validity 3650

      —ca-key: Path to the CA private key (ca.key). –ca-cert: Path to the CA certificate (ca.crt). –validity: Validity duration for the certificate.

Note

These certificates are intended for local development use only and should not be used in production environments.

Code Integration Steps

  • Replace the existing src directory and package.json file in the generated Microsoft 365 Toolkit project with the corresponding files from the cloned Git repository.

  • After replacing the files, run the following command to install all required dependencies:

    npm install

  • Navigate to the following file in your project:

    src -> sample -> lib -> config.ts

    const config = {
initiateLoginEndpoint: "",  # https://kumaran.com/teamsweb/#/auth-start.html
clientId: "",               # get the VITE_CLIENT_ID from the .localConfigs file
};

Modify your server url in Interceptors

baseURL: "YOUR API URL",  # https://kumaran.com/api/v1/monitoruser

Fill your Azure AD Applications details from aad Azure Portal website (https://entra.microsoft.com/).

  • Go to https://portal.azure.com and sign in with your Azure credentials.

  • In the left-hand menu, select “Azure Active Directory”.

  • Under Manage, click “App registrations”.

  • Select your application from the list. (Or click “New registration” to create a new one.)

.env.dev

TEAMS_APP_ID=               # Generate the GUID using PowerShell: `[guid]::NewGuid().ToString()`
TEAMS_APP_TENANT_ID=        # Go to your app's Overview, copy Tenant ID.
AAD_APP_CLIENT_ID=          # Go to your app’s Overview → Copy Application (client) ID.
AAD_APP_OBJECT_ID=          # In the same Overview, copy Object ID.
AAD_APP_ACCESS_AS_USER_PERMISSION_ID=        # Go to Expose an API → Under Scopes, copy the Scope ID of "access_as_user" permission.
AAD_APP_TENANT_ID=                 # Go to your app's Overview, copy Tenant ID.
AAD_APP_OAUTH_AUTHORITY_HOST= https://login.microsoftonline.com/<Tenant ID>
AAD_APP_OAUTH_AUTHORITY=https://login.microsoftonline.com
TAB_ENDPOINT=        # https://kumaran.com/teamsweb
TAB_DOMAIN=          # https://kumaran.com/
navigate to appPackage folder –> manifest.json
edit the manifest.json :

Add the your application tabs under the Static tabs :

{
        "entityId": "index",
        "name": "Dashboard",
        "contentUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
        "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
        "scopes": [
            "personal"
        ]
    },
    {
        "entityId": "index1",
        "name": "Teams Information",
        "contentUrl": "${{TAB_ENDPOINT}}/index.html#/general",
        "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/general",
        "scopes": [
            "personal"
        ]
    },
    {
        "entityId": "index2",
        "name": "Admin Console",
        "contentUrl": "${{TAB_ENDPOINT}}/index.html#/adminconsoletab",
        "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/adminconsoletab",
        "scopes": [
            "personal"
        ]
    },
    {
        "entityId": "index3",
        "name": "Plugins Information",
        "contentUrl": "${{TAB_ENDPOINT}}/index.html#/pluginstab",
        "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/pluginstab",
        "scopes": [
            "personal"
        ]
    },{
        "entityId": "index4",
        "name": "User Compliance",
        "contentUrl": "${{TAB_ENDPOINT}}/index.html#/usercompliance",
        "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/usercompliance",
        "scopes": [
            "personal"
        ]
    },
    {
        "entityId": "index5",
        "name": "SysAdmin Console",
        "contentUrl": "${{TAB_ENDPOINT}}/index.html#/sysadminconsoletab",
        "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/sysadminconsoletab",
        "scopes": [
            "personal"
        ]
    }
    }

modify the names,description and logo according to your organization

place your logo inside the appPackage folder :

The icon must  have a minimum resolution of 64 × 64 pixels.

        ├── appPackage/
                ├── build
                ├── logo.png

"icons": {
        "color": "logo.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "Etrk",
        "full": "Full name for Etrk plugin"
    },
    "description": {
        "short": "Short description of eTrk",
        "full": "Full description of eTrk"
    },

Deployment your Teams app

Now Build the App using the command,

`npm run build`

Deployment in server

Use the cd command to navigate to the directory where the Docker Compose files are uploaded.

After run the build of the Application.

├── Parent Directory/

├── eTrkPlugin └── docker-compose.yaml

`cd  Parent Directory`

Deploying Docker Compose

Execute the following command to deploy the Docker Compose application:

`docker-compose up -d --build`  // for up the application.
`docker-compose down` // for down the application.

Verifying Deployment

Once the deployment process completes, verify that the UI and API services are running correctly.By using this commands,we can verify the successful deployment.

`docker ps` -> listing all running containers
`docker logs container_name

Upload your custom app to teams

Generate the Manifest.dev.json file

navigate to teams toolkit extension, under the utility –> select the zip package. choose the manifest.json file and select the dev enivironment.

It will Automically update the manifest.dev.json under the build of appPackage

To deploy the Teams application, follow these steps:

  • Open Microsoft Teams, navigate to the Apps section → Manage your apps → Upload a custom app → Submit an app to your organization.

  • Upload the appPackage.dev.zip file found in the appPackage → build directory of your project.

  • Request your IT Administrator to grant the necessary permissions for your app.

  • Once approved, add the application to your personal tab for access.