Skip to main content

1) Create your 1st Miro app locally


Time to complete

Time to complete ~20 minutes

📘

Recommended onboarding tasks

Learning objective

Learning objective After completing this training module, you'll be able to:

  • Create your first Miro app from a local environment, outside our guided onboarding.
  • Understand the end-to-end flow:
    • Generating a boilerplate using npx create-miro-app@latest from the command line.
    • Running your app in Miro.
    • Managing Miro items on a board.

Training Companion Guide

View text summary

[00:20 - 01:18]

  • Training overview
  • Miro developer platform guided onboarding

[01:20 - 01:40]

[01:45 - 04:23]

  • Environment setup and requirements
    • Miro account
    • Developer team and app
    • Code editor / IDE
  • npx create-miro-app@latest
    • Running create-miro-app from the command line
    • Generating boilerplate app
    • 1-click configuration of a developer team and app in Miro
  • App credentials
    • Populate the .env file in your local app’s directory
  • Running your project
    • npm run start
    • View the running application on localhost

[04:30 - 06:25]

  • Access your app within Miro
    • Miro apps are launched from the left hand toolbar on an open Miro board
  • Subscribing to the icon:click event
    • icon:click is required for apps to appear in the toolbar
    • icon:click subscription included by default for apps created with create-miro-app
  • Launching an app from the toolbar

[06:27 - 09:10]

  • Web SDK Methods
  • Mirotone
    • Pre-built components available in our Miro-styled library
    • Mirotone.xyz
  • Implementing a button that adds a sticky note on click

[09:12 - 10:17]

  • Learning summary
    • Miro’s learning paths
    • Environment setup
    • Launching an app in Miro
    • SDK methods and Mirotone library
  • Guided learning path preview

Associated skills

Associated skills By following this training, you become familiar with these concepts and skills:

See also