{"id":16431122,"url":"https://github.com/waldekmastykarz/angular-teams-app","last_synced_at":"2025-10-26T23:31:48.683Z","repository":{"id":40305766,"uuid":"456432547","full_name":"waldekmastykarz/angular-teams-app","owner":"waldekmastykarz","description":"Boilerplate Teams app with built-in SSO made with Angular","archived":false,"fork":false,"pushed_at":"2022-05-16T06:33:55.000Z","size":1121,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-05T11:55:00.387Z","etag":null,"topics":["angular","microsoft-azure","microsoft-teams","msal","msal-angular"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waldekmastykarz.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-07T09:13:32.000Z","updated_at":"2024-02-13T07:55:23.000Z","dependencies_parsed_at":"2022-08-09T16:52:30.683Z","dependency_job_id":null,"html_url":"https://github.com/waldekmastykarz/angular-teams-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldekmastykarz%2Fangular-teams-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldekmastykarz%2Fangular-teams-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldekmastykarz%2Fangular-teams-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldekmastykarz%2Fangular-teams-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waldekmastykarz","download_url":"https://codeload.github.com/waldekmastykarz/angular-teams-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238413072,"owners_count":19467952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","microsoft-azure","microsoft-teams","msal","msal-angular"],"created_at":"2024-10-11T08:29:14.739Z","updated_at":"2025-10-26T23:31:48.107Z","avatar_url":"https://github.com/waldekmastykarz.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Teams App Starter\n\n\u003e Boilerplate Teams app with built-in SSO made with Angular.\n\nFeatures:\n- [Azure Active Directory](https://azure.microsoft.com/services/active-directory/?WT.mc_id=javascript-0000-cxa) authentication, compatible with Teams' SSO.\n- Automated scripts to create, publish and update your Teams app.\n- Local tunnel setup to test your app in Teams using your local dev server (with live reload).\n\n## Getting started \n\n**Prerequisites:** You need a [Microsoft 365 developer tenant](https://developer.microsoft.com/microsoft-365/dev-program?WT.mc_id=javascript-0000-cxa) to publish the Teams app.\n\n1. Clone the repository, and run `npm install`\n2. Login to CLI for Microsoft 365: `npm run m365:login`\n3. Create the Azure Active Directory (AAD) app: `npm run m365:create-aad-app`\n4. Publish app to Teams: `npm run m365:publish`\n\nThese steps are only needed the first time.\n\nAfter publishing your app, you can test it in Teams using your local dev server:\n```bash\nnpm run start:tunnel\n```\n\nThis will start a local web server that will serve the app, and create a tunnel to the web server to expose it through a public URL using [localtunnel](https://github.com/localtunnel/localtunnel).\n\n\u003e **Note:** You need a unique URL for the app to be accessible from the web, therefore you should replace the `myuniquedomain` used in the `tunnel` and `update:manifest` scripts with a unique domain in the scripts section of `package.json`.\n\n## Project structure\n\n```\napi/        Test API to verify that the Angular app can call APIs secured with AAD.\npackage/    Files for the Teams app package. \nsrc/        Angular app\nscripts/    Scripts to update Teams app IDs and URLs.\n```\n\n## Main tasks\n\nTask automation is based on [NPM scripts](https://docs.npmjs.com/misc/scripts).\n\nTasks                         | Description\n------------------------------|---------------------------------------------------------------------------------------\nnpm start:tunnel              | Run development server on `http://localhost:4200/` and create a public URL to access it\nnpm run build                 | Build app for production in `dist/` folder\nnpm test                      | Run unit tests via [Karma](https://karma-runner.github.io) in watch mode\nnpm run m365:login            | Log in to Microsoft 365 CLI\nnpm run m365:create-aad-app   | Create Azure Active Directory (AAD) app\nnpm run m365:package          | Create Teams app zip package\nnpm run m365:publish          | Publish Teams app to Microsoft 365 (first time only)\nnpm run m365:update           | Update Teams app in Microsoft 365\n\n## Updating Teams app\n\nIf you update the app or public URL, you need to publish an update to your Teams app:\n\n1. In `package.json`, bump the version number. You can also use `npm version patch` to bump the patch version number.\n2. Update the Teams app: `npm run m365:update`\n\n## Deploying to production\n\nWhen you are ready to deploy your app to production, there are two main steps needed to make your app available to the public: first you need to deploy your web app on a server, and then you need to publish the app to your production tenant.\n\n### Step 1: Deploying your web app\n\n1. Build app for production in `dist/` folder using `npm run build`.\n2. Deploy the built app to your favorite cloud provider. See [instructions below](#Deploying-Angular-app-to-to-Azure-Static-Web-Apps) for deploying to [Azure Static Web Apps](https://azure.microsoft.com/services/app-service/static/?WT.mc_id=javascript-0000-cxa) for example.\n\n### Step 2: Deploying your Teams app\n\n1. Set your production URL with `node scripts/update-manifest.js \u003cproduction_url\u003e`\n1. Login to CLI for Microsoft 365 onto the production tenant: `npm run m365:login`\n1. Create the Azure Active Directory (AAD) app: `npm run m365:create-aad-app`\n1. Publish app to Teams: `npm run m365:publish`\n\n## Deploying web app to to Azure Static Web Apps\n\n\u003e What's Azure Static Web Apps? It's an all-inclusive hosting service for web apps providing features like continuous deployment, serverless APIs, authentication and more. And it has a free tier!\n\nPrerequisites:\n- A [GitHub account](https://github.com/join)\n- An [Azure account](https://azure.microsoft.com/free/?WT.mc_id=javascript-0000-cxa) (you can reuse your GitHub account to login)\n\n1. Click on this button to open the Azure portal:\u003cbr\u003e [![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false\u0026WT.mc_id=javascript-0000-cxa#create/Microsoft.StaticApp)\n2. Fill in the details (you don't need to change what's not mentioned):\n  - **Resource Group:** Select **Create new** and type in `angular-teams-app`\n  - **Name:** Type in `angular-teams-app`\n  - Select **Sign in with GitHub**, and pick the **Organization**, **Repository** and **Branch** for the repo with the app you want to deploy.\n3. Select **Review + Create**, then **Create**.\n\nWait a few seconds for everything to be set up, and click on **Go to resource**. From there, you'll be able to see the new public URL that was created for your app in the **URL** field.\n\nThis is what you'll use for your production URL. After a few minutes, your Teams app will be available at this URL.\n\nYou can find more tutorials on using Static Web Apps [here](https://docs.microsoft.com/learn/paths/azure-static-web-apps/?WT.mc_id=javascript-0000-cxa).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaldekmastykarz%2Fangular-teams-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaldekmastykarz%2Fangular-teams-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaldekmastykarz%2Fangular-teams-app/lists"}