This fullstack app allows you to create Miro webhook subscriptions for boards through a simple UI which can be launched directly from a Miro board.

ℹ️ Subscriptions are created per user, per board. For more details on webhook endpoint requirements, see our Webhooks documentation.

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

• Miro Web SDK
• Miro Node.js API Client
• Miro Webhooks

• NextJS
• TypeScript
• Vite

• 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.
• You have a valid https endpoint to use for creating webhook subscriptions in Miro

To view a developer tutorial that covers how to leverage Miro Webhooks using a test endpoint without a UI, see the set up a test endpoint tutorial on Miro's Developer documentation. Note: This is separate from this Webhook Manager app.

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 and then click save:

# See https://developers.miro.com/docs/app-manifest on how to use this
appName: Webhooks Manager
sdkVersion: SDK_V2
sdkUri: http://localhost:3000
scopes:
  - 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.⚠️

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 Webhook Manager or whatever you chose to name it. Click on your app to use it, as shown in the video below.

.
├── pages
│  └── api <-- Directory that contains files for auth and redirect, as well as webhook configuration
│  └── _app.tsx
│  └── _document.tsx
│  └── index.tsx <-- Main app file
├── styles
└── initMiro.ts <-- Sets up a Miro instance in the NodeJS Client

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

MIT License.