01.dice-roller

Dice Roller - Live Share sample

This repository contains a simple app that enables all connected clients to roll a dice and view the result. For a walkthrough of this example and how it works, check out the tutorial documentation.

Requirements

Node 12.17+

Getting Started

After cloning the repository, you must first set up the npm workspace from the root of the project. Then, run the following commands from the command line:

npm install
npm run build:packages # Build Live Share packages
cd samples/t*/01*
npm start

Running npm start, it will do two things: start the tinylicious server and start the application using vite. If you have never used tinylicious before, you should see instead is a prompt saying Ok to proceed? (y), after which you should type y and press the "enter" key. In rare cases you might not see the Ok to proceed? (y) prompt, in which case try running npx tinylicious@latest in your command line directly, and then try again.

Note: Do not run npm start before running npm run build:packages from the root of the project, unless you first move the sample out of this npm workspace. When using our samples, you are testing the packages using symlinks, and not the Live Share SDK versions published to npm.

Testing the app in Teams

Create a ngrok tunnel to allow Teams to reach your tab app

1. Download ngrok.
2. Launch ngrok with port 3000. ngrok http 3000 --host-header=localhost (You will need an ngrok account to use host-header)
3. In a second terminal, run npm run start-https (rather than the traditional npm run start)

Create the app package to sideload into Teams

1. Open .\manifest\manifest.json and update values in it, including your Application ID.
2. You must replace https://<<BASE_URI_DOMAIN>> with the https path to your ngrok tunnel.
3. It is recommended that you also update the following fields.
   • Set developer.name to your name.
   • Update developer.websiteUrl with your website.
   • Update developer.privacyUrl with your privacy policy.
   • Update developer.termsOfUseUrl with your terms of use.
4. Create a zip file with the contents of .\manifest directory so that manifest.json, color.png, and outline.png are in the root directory of the zip file.
   • On Windows or Mac, select all files in .\manifest directory and compress them.
   • Give your zip file a descriptive name, e.g. DiceRollerLiveShare.

Test it out

1. Schedule a meeting for testing from calendar in Teams.
2. Join the meeting.
3. In the meeting window, tap on + Apps and tap on Manage apps in the flyout that opens.
4. In the Manage apps pane, tap on Upload a custom app.
   • Don't see the option to Upload a custom app?! Follow instructions here to enable custom-apps in your tenant.
5. Select the zip file you created earlier and upload it.
6. In the dialog that shows up, tap Add to add your sample app into the meeting.
7. Now, back in the meeting window, tap + Apps again and type the name of your app in the Find an app textbox.
8. Select the app to activate it in the meeting.
9. In the configuration dialog, just tap Save to add your app into the meeting.
10. In the side panel, tap the share icon to put your app on the main stage in the meeting.

11. That's it! You should now see dice-roller on the meeting stage.
12. Your friends/colleagues invited to the meeting should be able to see your app on stage when they join the meeting.

npm run build

Builds the app for production to the dist folder.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!