Boilerplate Teams app with built-in SSO made with Angular.
Features:
- Azure Active Directory authentication, compatible with Teams' SSO.
- Automated scripts to create, publish and update your Teams app.
- Local tunnel setup to test your app in Teams using your local dev server (with live reload).
Prerequisites: You need a Microsoft 365 developer tenant to publish the Teams app.
- Clone the repository, and run
npm install - Login to CLI for Microsoft 365:
npm run m365:login - Create the Azure Active Directory (AAD) app:
npm run m365:create-aad-app - Publish app to Teams:
npm run m365:publish
These steps are only needed the first time.
After publishing your app, you can test it in Teams using your local dev server:
npm run start:tunnelThis 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.
Note: You need a unique URL for the app to be accessible from the web, therefore you should replace the
myuniquedomainused in thetunnelandupdate:manifestscripts with a unique domain in the scripts section ofpackage.json.
api/ Test API to verify that the Angular app can call APIs secured with AAD.
package/ Files for the Teams app package.
src/ Angular app
scripts/ Scripts to update Teams app IDs and URLs.
Task automation is based on NPM scripts.
| Tasks | Description |
|---|---|
| npm start:tunnel | Run development server on http://localhost:4200/ and create a public URL to access it |
| npm run build | Build app for production in dist/ folder |
| npm test | Run unit tests via Karma in watch mode |
| npm run m365:login | Log in to Microsoft 365 CLI |
| npm run m365:create-aad-app | Create Azure Active Directory (AAD) app |
| npm run m365:package | Create Teams app zip package |
| npm run m365:publish | Publish Teams app to Microsoft 365 (first time only) |
| npm run m365:update | Update Teams app in Microsoft 365 |
If you update the app or public URL, you need to publish an update to your Teams app:
- In
package.json, bump the version number. You can also usenpm version patchto bump the patch version number. - Update the Teams app:
npm run m365:update
When 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.
- Build app for production in
dist/folder usingnpm run build. - Deploy the built app to your favorite cloud provider. See instructions below for deploying to Azure Static Web Apps for example.
- Set your production URL with
node scripts/update-manifest.js <production_url> - Login to CLI for Microsoft 365 onto the production tenant:
npm run m365:login - Create the Azure Active Directory (AAD) app:
npm run m365:create-aad-app - Publish app to Teams:
npm run m365:publish
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!
Prerequisites:
- A GitHub account
- An Azure account (you can reuse your GitHub account to login)
- Click on this button to open the Azure portal:
- Fill in the details (you don't need to change what's not mentioned):
- Resource Group: Select Create new and type in
angular-teams-app - Name: Type in
angular-teams-app - Select Sign in with GitHub, and pick the Organization, Repository and Branch for the repo with the app you want to deploy.
- Select Review + Create, then Create.
Wait 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.
This is what you'll use for your production URL. After a few minutes, your Teams app will be available at this URL.
You can find more tutorials on using Static Web Apps here.