Miro Web SDK App with Python and Flask

Contents

· Introduction
· Web SDK with JavaScript and React
· Web SDK with Python and Flask
· Miro

Introduction

Miro is a wonderful Visual Collaboration Platform with a complete REST API and Web SDK for Apps development. This story is about creating a Web SDK App using Python and Flask, instead of Javascript and React.

Web SDK with JavaScript and React

Miro has a 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, based on the following link above:

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 runnning ]

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 find the most relevant directories/files of the application and some of them I just copy 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

Below you find the documentation of the Mirotone CSS Library:

Mirotone CSS Library

You may take a look at the changes, but it’s all very straightforward. Below you will find my GitHub repository:

GitHub Miro App Python and Flask 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 )

Miro

You have to configure Miro with the proper Url:

Once you open your application in Miro a form is shown and you may create some 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.

Should I have some time, I will create a .NET ( Core ) 6.0 version 😀