README.template.md

Miro Example App

Use this template to contribute to Miro's App Examples!

This app shows how to use a certain Miro SDK or API functionality to accomplish a certain task.

👨🏻‍💻 App Demo

Insert app demo here.

📒 Table of Contents

• Included Features
• Tools and Technologies
• Prerequisites
• Associated Developer Tutorial
• Run the app locally
• Folder Structure
• Contributing
• License

⚙️ Included Features

• Miro Web SDK

  Insert SDK methods here which your project uses

🛠️ Tools and Technologies

Insert tools and technologies here which your project uses and link to them.

✅ Prerequisites

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• Your development environment includes Node.js 14.13 or a later version.
• All examples use npm as a package manager and npx as a package runner.

Add any other prerequisites here!

🏃🏽‍♂️ Run the app locally

Add steps to run the app locally. Try to make them as similar as possible to other example apps for consistency.

1. Run npm install to install dependencies.

2. Run npm start to start developing.
   Your URL should be similar to this example:

   http://localhost:3000
   

3. Open the app manifest editor by clicking Edit in Manifest.
   In the app manifest editor, configure the app as follows:

   # See https://developers.miro.com/docs/app-manifest on how to use this
   appName: Example app
   sdkUri: "http://localhost:3000"
   scopes:
     - boards:read
     - boards:write

   • sdkUri: assign http://localhost:3000 as a value for this property.
     It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
   • scopes: add the permission scopes that users need to grant the app when they install it.
     To enable the app to read from and write to the board, add the following permissions:
     • boards:read
     • boards:write

4. Go back to your app home page, and under the Permissions section, you will see a blue button that says Install app and get OAuth token. Click that button. Then click on Add as shown in the video below. In the video we install a different app, but the process is the same regardless of the app.

⚠️ We recommend to install your app on a developer team while you are developing or testing apps.⚠️

install-app.mov

5. Go to your developer team, and open your boards.
6. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say More apps.
7. Search for your app Calendar or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app.

search-for-app.mov

🗂️ Folder structure

Explain your folder structure so a developer can quickly understand the layout of your code.

It should look something like this.

.
├── src
└── initMiro.ts <-- This is where the Node Client is initialized.

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.