Skip to content

🐳7️⃣ pre-compile mjml email templates and delete runtime mjml-tcpserver

This MR

  • Pre-compiles our mjml templates down to raw html django templates using https://eta.js.org/ and the mjml library itself.
  • Removes any runtime mjml tcpservers/cmd usage from all the various deployment methods
  • Adds a dev.sh container that watches for changes to the .mjml.eta and .layout.eta files and compiles them automatically into the raw html django templates
  • Adds a gitlab ci job which ensures that the mjml templates have been compiled (it runs the compile step and asserts there are no pending git changes, if there are it fails and tells the user to run the compile script)
  • Adds a dev only mailhog container which lets you go to localhost:8025 to see any emails sent by Baserow, great for debugging! ./dev.sh configures Baserow in dev mode to send emails to this container.

Why do this

  • Remove the runtime mjml service/cmd usage required by Baserow in all of deployment methods:
    • This completely removes any security worries of these mjml containers being often out of date, unsecure, very low use
    • This removes security worries of django-mjml running Popen in the backend server to compile emails
    • This simplifies our architecture
    • This simplifies our email setup and removes an extra point of failure for self hosters + us helping them debug emails
  • Email sending now can be tested in python unit tests without needing a mjml server running
  • Email sending is now just a bog standard django html template and doesn't need to run a mjml render step for every email sent increasing performance
  • We can upgrade mjml much easier as its just a build time dependency
  • We can customize the output of mjml by changing its arguments or by directly editting the html it generates as this is now available in our repo
  • We can easily inspect what the exact emails we are sending by looking at the source

How do I change emails templates now in Baserow

  • ./dev.sh restart --build
  • edit one of backend/src/baserow/core/templates/baserow/base.layout.eta or backend/src/baserow/core/templates/baserow/**/*.mjml.eta
  • See the changes of your edit immediately compiled into the backend/src/baserow/core/templates/baserow/**/*.html file corrosponding to the file you made. (The .layout.eta file is not compiled to html but instead used as a layout by the other .mjml.eta files)

What are these ETA files?

ETA is a simple javascript templating library. See backend/src/baserow/core/templates/baserow/base.layout.eta for an explanation on why we are using it now. Essentially it lets us use a base mjml layout file which the email templates inherit from. We can't use django for this as we need to do this at build time.

Compiling mjml on baserow backend dev server startup

  • This would require us to install node + yarn into our python backend dev image and then run some sort of process on startup to run mjml. Having to install node into our backend dev python image seems like a bad idea so:
  • Instead I opted for a javascript watching script found in backend/mjml which auto watches the template files, runs a templating step on them to generate mjml files and then runs mjml on those files to generate django templates
  • This script can be run manually with a simple yarn install && yarn run compile OR:
  • This script is run in a container automatically with ./dev.sh and instantly makes the changes needed when you modify one of the .mjml.eta templates.

Testing notes

  • Emails sent are exactly the same as before
  • Can send emails in docker-compose
  • Can still send emails from heroku
  • Can still send emails from cloudron

Merge Request Checklist

  • [*] changelog.md has been updated if required
  • [*] New/updated Premium features are separated correctly in the premium folder
  • [*] The latest Chrome and Firefox have been used to test any new frontend features
  • [*] Documentation has been updated
  • [*] Quality Standards are met
  • [*] Performance: tables are still fast with 100k+ rows, 100+ field tables
  • [*] The redoc API pages have been updated for any REST API changes
  • [*] Our custom API docs are updated for changes to endpoints accessed via api tokens
  • [*] The UI/UX has been updated following UI Style Guide
Edited by Nigel Gott

Merge request reports