Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baboon-king/teams-app-outlook-xxx
https://github.com/baboon-king/teams-app-outlook-xxx
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/baboon-king/teams-app-outlook-xxx
- Owner: baboon-king
- Created: 2023-09-14T15:56:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-14T17:48:13.000Z (over 1 year ago)
- Last Synced: 2025-01-23T03:11:32.344Z (15 days ago)
- Language: Vue
- Size: 155 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# teams-app-outlook-xxx
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
# Build Outlook add-ins using Teams Toolkit
Outlook add-ins are integrations built by third parties into Outlook by using our web-based platform.
Now you have the ability to create a single unit of distribution for all your Microsoft 365 extensions by using the same manifest format and schema, based on the current JSON-formatted Teams manifest.
## Prerequisites
- [NodeJS](https://nodejs.org/en/): version 16 or 18.
- Outlook for Windows: Beta Channel, Build 16320 or higher. Follow [this link](https://github.com/OfficeDev/TeamsFx/wiki/How-to-switch-Outlook-client-update-channel-and-verify-Outlook-client-build-version) for switching update channels and check your Outlook client build version.
- Edge installed for debugging Outlook add-in.
- An M365 account. If you do not have M365 account, apply one from [M365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)
- [Teams Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) version 5.0.0 and higher.
## Debug Outlook add-in
- Please note that the same M365 account should be used both in Teams Toolkit and Outlook.
- From Visual Studio Code: Start debugging the project by hitting the `F5` key in Visual Studio Code.
## Edit the manifest
You can find the app manifest in `./appPackage` folder. The folder contains one manifest file:
- `manifest.json`: Manifest file for Outlook add-in running locally or running remotely (After deployed to Azure).
You may add any extra properties or permissions you require to this file. See the [schema reference](https://raw.githubusercontent.com/OfficeDev/microsoft-teams-app-schema/preview/op/extensions/MicrosoftTeams.schema.json) for more information.
## Deploy to Azure
Deploy your project to Azure by following these steps:
| From Visual Studio Code | From TeamsFx CLI |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
- Open Teams Toolkit, and sign into Azure by clicking the `Sign in to Azure` under the `ACCOUNTS` section from sidebar.
- After you signed in, select a subscription under your account.
- Open the Teams Toolkit and click `Provision` from DEVELOPMENT section or open the command palette and select: `Teams: Provision`.
- Open the Teams Toolkit and click `Deploy` or open the command palette and select: `Teams: Deploy`.
- Run command `teamsfx account login azure`.
- Run command `teamsfx account set --subscription `.
- Run command `teamsfx provision`.
- Run command: `teamsfx deploy`.
> Note: Provisioning and deployment may incur charges to your Azure Subscription.
To sideload the deployed add-in:
- Copy the production URL from the `ADDIN_ENDPOINT` in env/.env.dev file.
- Edit webpack.config.js file and change `urlProd` to the value you just copied. Please note to add a '/' at the end of the URL.
- Run `npm run build`.
- Run `npx office-addin-dev-settings sideload ./dist/manifest.json`.
## Validate manifest file
Known issue: manifest validation is not supported for now.
To check that your manifest file is valid:
- From Visual Studio Code: open the command palette and select: `Teams: Validate Application` and select `Validate using manifest schema`.
- From TeamsFx CLI: run command `teamsfx validate` in your project directory.
## Known Issues
- Publish is not supported for an Outlook add-in project now.
- Manifest validation is not supported for now.