DocumentationResourcesMarketplaceCommunity
Documentation
Build your app

1) Create your 1st Miro app locally

In this training you create, develop, and run a Miro app on your local machine.


Time to complete

Time to complete ~20 minutes

❗️

Deprecated training

Please note this training has been deprecated and will soon be replaced with an updated video and guide. Please see our guide on Build your first Hello, World app for detailed instructions on how to create a boilerplate application on Miro.

📘

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

Updated 26 days ago

What's next