https://github.com/mmsharepoint/teams-tab-spo
https://github.com/mmsharepoint/teams-tab-spo
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mmsharepoint/teams-tab-spo
- Owner: mmsharepoint
- Created: 2021-06-18T11:30:18.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T08:04:55.000Z (almost 2 years ago)
- Last Synced: 2025-01-14T08:16:31.657Z (over 1 year ago)
- Language: TypeScript
- Size: 146 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tab SPO Rest Api access - Microsoft Teams App
This app describes how to establish a team's tap as its own solution including the generation of a second SharePoint access token.
For further details see the [authors blog post](https://mmsharepoint.wordpress.com/2021/06/22/use-sharepoint-rest-api-in-microsoft-teams-with-sso-and-on-behalf-flow/)
## Getting started with Microsoft Teams Apps development
Head on over to [Microsoft Teams official documentation](https://developer.microsoft.com/en-us/microsoft-teams) to learn how to build Microsoft Teams Tabs or the [Microsoft Teams Yeoman generator Wiki](https://github.com/PnP/generator-teams/wiki) for details on how this solution is set up.
## Project setup
All required source code are located in the `./src` folder - split into two parts
* `app` for the application
* `manifest` for the Microsoft Teams app manifest
## Building the app
The application is built using the `build` Gulp task.
``` bash
npm i -g gulp gulp-cli
gulp build
```
## Building the manifest
To create the Microsoft Teams Apps manifest, run the `manifest` Gulp task. This will generate and validate the package and finally create the package (a zip file) in the `package` folder. The manifest will be validated against the schema and dynamically populated with values from the `.env` file.
``` bash
gulp manifest
```
## Configuration
Configuration is stored in the `.env` file.
## Debug and test locally
To debug and test the solution locally you use the `serve` Gulp task. This will first build the app and then start a local web server on port 3007, where you can test your Tabs, Bots or other extensions. Also this command will rebuild the App if you change any file in the `/src` directory.
``` bash
gulp serve
```
To debug the code you can append the argument `debug` to the `serve` command as follows. This allows you to step through your code using your preferred code editor.
``` bash
gulp serve --debug
```
To step through code in Visual Studio Code you need to add the following snippet in the `./.vscode/launch.json` file. Once done, you can easily attach to the node process after running the `gulp server --debug` command.
``` json
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858,
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
],
"remoteRoot": "${workspaceRoot}/src/"
},
```
### Using ngrok for local development and hosting
In order to make development locally a great experience it is recommended to use [ngrok](https://ngrok.io), which allows you to publish the localhost on a public DNS, so that you can consume the bot and the other resources in Microsoft Teams.
To use ngrok, it is recommended to use the `gulp ngrok-serve` command, which will read your ngrok settings from the `.env` file and automatically create a correct manifest file and finally start a local development server using the ngrok settings.
### Additional build options
You can use the following flags for the `serve`, `ngrok-serve` and build commands:
* `--no-linting` - skips the linting of Typescript during build to improve build times
* `--debug` - builds in debug mode
## Deployment
The solution can be deployed to Azure using any deployment method.
* For Azure Devops see [How to deploy a Yo Teams generated project to Azure through Azure DevOps](https://www.wictorwilen.se/blog/deploying-yo-teams-and-node-apps/)
* For Docker containers, see the included `Dockerfile`
## Logging
To enable logging for the solution you need to add `msteams` to the `DEBUG` environment variable. See the [debug package](https://www.npmjs.com/package/debug) for more information. By default this setting is turned on in the `.env` file.
Example for Windows command line:
``` bash
SET DEBUG=msteams
```
If you are using Microsoft Azure to host your Microsoft Teams app, then you can add `DEBUG` as an Application Setting with the value of `msteams`.