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
~20 minutes
Recommended onboarding tasks
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.
- Generating a boilerplate using
Training Companion Guide
View text summary
[00:20 - 01:18]
- Training overview
- Miro developer platform guided onboarding
[01:20 - 01:40]
- Recommended onboarding tasks
[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 toolbaricon: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
By following this training, you become familiar with these concepts and skills:
- Install a sample app with npm:
create-miro-app
- Web SDK events:
icon:click
- Style apps with Mirotone
- Web SDK board methods
- Web SDK board methods:
createStickynote()
See also
Updated 10 months ago
What's next