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
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
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 26 days ago
What's next