Creating a Miro Web SDK app using Python and Flask

The Miro Developer Platform complements Miro — the visual workspace for innovation — by empowering developers and partners to build their own apps and integrations on Miro.

The Developer Platform includes a complete REST API and Web SDK. In this post, learn how one engineer created a Web SDK app by using Python and Flask, instead of Javascript and React. This is an excerpt from @EasyLob’s exploration of Miro’s APIs.

Web SDK with JavaScript and React

Miro has an npm package to create apps using JavaScript-based technologies: Build your first Hello, World app

Preact [WEB SDK]
React [WEB SDK]
Vanilla [WEB SDK]
Vue [WEB SDK]
Miro Node Client Library with Express : Express [WEB SDK & REST API]
Next.js framework with Web SDK and API client installed : Next.js [WEB SDK]

JavaScript
TypeScript

But I was wondering if I could use Python and Flask to do the same. I started creating a normal application, using JavaScript and React, by following along with the documentation.

npx create-miro-app@latest

[ my-app + Rect + JavaScript ]

cd my-app
npm start

[ open http://locahost:3000 in the browser to check if it is running ]

The final App is a JavaScript and React application running at http://localhost:3000 with two pages:

• The first one is shown when you open a Miro Board (or the link above) and is responsible for registering your application in Miro menu.
• The second one is shown when you open your application in Miro menu and it responsible for the App Business Logic.

Web SDK with Python and Flask

So, my challenge was to replicate the behavior using Python and Flask. Below you’ll find the most relevant directories/files of the application; some of them I just copied from React App:

/static
  /css
    /mirotone <- copy from React App
      /images
      styles.css
    style.css <- copy from React App
  /image
    congratulations.png<- copy from React App
    welcome.png<- copy from React App
  /js
/templates
  home.html <- based on "index.html" from React App
  miro.html <- based on "app.jsx" from React App

You can find the documentation in the Mirotone CSS Library.

You may take a look at the changes, but it’s all very straightforward. You can also check out my GitHub repository.

Miro
  Python
    App-Python

To get the application running, you need to install the following pip packages:

pip install flask flask-cors

To run the application with Flask (to make things easier, port 3000 is the same as used in React App ), execute:

cd \Miro\Python\App-Python

flask run -host=0.0.0.0 -port=3000

To run the application with Gunicorn in a Production server, with HTTPS certificates, execute:

pip install gunicorn

WINDOWS
gunicorn ^
  -certfile /etc/letsencrypt/live/domain.com/cert.pem ^
  -keyfile /etc/letsencrypt/live/domain.com/privkey.pem ^
  -b 0.0.0.0:3443 ^
  app:app

LINUX
gunicorn \
  -certfile /etc/letsencrypt/live/domain.com/cert.pem \
  -keyfile /etc/letsencrypt/live/domain.com/privkey.pem \
  -b 0.0.0.0:3443 \
  app:app

With the application running, you will get the following routes available:

def home() : /
  Miro App registration page
def miro() : /miro
  Miro App page ( the one you see in Miro board )

Configuring Miro

You have to configure Miro with the proper Url:

Once you open your application in Miro, you’re presented with the option to create Sticky Notes:

I am currently working on more tests to see if there is any incompatibility with Python, but so far there are none.

The big advantage for me is getting a server-side application with an API and, at the same time, a way to create the client-side Miro app. Of course, I could do this with Node.js + Next.js or Express, but Python was my target language for this project. 😀

Taking it further: Miro OAuth2.0 and REST API

Now that I’ve created a Miro Web SDK App in Python/Flask, I’d like to include OAuth2.0 authorization so that my app will also be able to use the Miro REST API.

Check out my article on how to approach Miro OAuth2.0 and leverage their REST API, which includes more details on how to do this with Python/Flask (as well as C#, if you’re interested).