Build your first Hello, World app

This tutorial shows you how to get a simple app running in Miro using the Miro Web SDK.
By the end of this guide, you'll have built an app that displays a sticky note on the board with the text Hello, World!.

If you've never built a Miro app before, you're in the right place. Let's get started!

Prerequisites

Before you begin, ensure that you have the following prerequisites:

You have a Developer team.
Your development environment includes Node.js 14.15 or a later version.
To run your app locally, your web browser must allow the HTTP transport protocol.
Recommended web browser: Google Chrome
Apple Safari doesn't allow HTTP; therefore, it doesn't allow the sample app to run locally.

Step 1: bootstrap the hello world app

Video Run the command to create the sample app, and then click the link to review the preconfigured app options in the app settings UI.

Open the terminal and run:
```
npx create-miro-app@latest
```
Give your app a name, or press ↵ Enter to use the default app name: my-miro-app.
Select your framework.
If you're creating an app that uses only the Web SDK, select one of these options:
- Preact
- React
- Vanilla
- Vue
If you're creating an app that also features a backend, select one of these options:
- Miro Node Client Library with Express: includes the Miro Node.js client library; optimized for the Express web framework.
  - Note: this app does not have a UI, so it cannot open within Miro. You will not find the app on the left side bar, so you can skip the Try it out in Miro step at the bottom of this page. You will also need a publicly available callback URL to complete the OAuth flow. We use Ngrok in this guide for this purpose, but there are many other solutions for this.
- Next.js framework with Web SDK and API client installed: includes the Miro Node.js client library; optimized for the Next.js framework.
  - Note: you will need to set the callback URL to use the REST API portion of the app, but you should be able to use http://localhost:3000/api/redirect as the redirect URL. Make sure to add it in the app settings page on developers.miro.com for the relevant app.
Select your flavor.
Choose one of the following options:
- JavaScript
- TypeScript
Once the app is created, click the link displayed in the terminal.

Figure 1. The terminal displays a link and a message: Create your preconfigured app in Miro by clicking on the following link.

It points to the app settings UI, where you can:

i. Create the app by clicking the Create app button on the Create new app modal.
ii. Check the preconfigured options in the app settings UI.
iii. Click Install app and get OAuth token to install the app to a team.
In the terminal, go to the my-miro-app directory, where my-miro-app is the application name that you set in step 1.
```
cd my-miro-app
```
Figure 2. In the app project root directory, use npm commands to install dependencies, build the app, and start running the app.
If you selected Miro Node Client Library with Express or Next.js framework with Web SDK and API client installed during step 3:
i. Go to the app settings UI and copy the clientId and clientSecret from the App Credentials section.
ii. In the .env file generated by running create-miro-app, update MIRO_CLIENT_ID and MIRO_CLIENT_SECRET
iii. For the Miro Node Client Library with Express you will also need a callback URL which is publicly available, to go through the OAuth flow. For Next.jsyou should be able to use the default http://localhost:3000/api/redirect. You need to fill that out in the redirect URL in the .env and also the app settings page on developers.miro.com.
To start the app and begin developing, run:

npm start

Take a note of where your app is running. If you're developing locally it should be localhost:3000. Open your browser, and go to where your app is running, like localhost:3000.
A message indicating that your app is now running locally appears. Note: unless you chose Miro Node Client Library with Expressyou can skip the following.
1. If you chose Miro Node Client Library with Express you will need a publicly available callback URL.
  1. One easy way to do this is to run the local server on localhost:3000, and then use ngrok http 3000command to generate a forwarding url. That forwarding URL can be used as your redirect URL in the .env file. Make sure to also set the same redirect URL in your Miro app settings. For example, it can look like https:<your-ngrok-site>/auth/miro/callback/. Once you have the redirect URL set, then you can go to your local server (localhost:3000 for example) and then you will go through the OAuth flow. Once you click Addyou will go to the redirect URL, and if all went well, you should see a simple HTML page with the text "These are the boards that you have access to:" and then the Miro boards you have in your account where you installed the app.

Figure 1. Your app is running locally.

Step 2: try out your app in Miro

Note: You can skip these steps if you are using the Miro Node Client Library with Expresssince it's meant to be a backend app, not an app to be used within Miro itself.

Open your Miro dashboard. Click the Dev team (DT icon on the left pane), and then click the + New board tile.
If the modal with the template picker appears, close it.
On the newly created board, click + / More apps on the app toolbar on the left side of the board, and then click the app icon corresponding to the app name that you assigned upon creation.
For example: my-miro-app, or Hello World.

You should see a sticky note on the board with the text Hello, World.

You did it!

Congratulations on building your first Miro app. The Miro Developer Platform allows you to create all kinds of fun, useful apps and integrations. It’s flexible so you can build what you want, and it's powerful enough to support essential workflows for you and your team.

Explore more examples of other apps and ideas that you can build. To find out more, check Miro App Examples.

Here's a list of topics you may want to check out:

Get acquainted with fundamental concepts about Miro platform development.
Learn how to create and interact with items on the board.
Look through our Web SDK reference to get ideas about what to build next.
Explore our design guidelines and best practices that dive into the details of building good Miro apps that help you provide a great user experience.
When you're ready to take your app from development to deployed, you'll want to know more about how to submit your app.