One of my previous posts about communcation via a Telegram Bot reminded me that Structr also has support server-sent events using the EventSource interface. This enables us to push live updates to users with a few lines of JavaScript. In this post we will extend the example application from the previous post and create a small example with an auto-updating progress-bar using this pattern. With a little imagination we can adapt this basic example to more advanced scenarios. Let's get started...

This post serves as kind of a "Part 2" of the previous post. Using TailwindCSS is nice but creating reusable components (regardless of the framework) seems to be a common problem when learning how to develop with structr. In this article I'll explain my (currently) favorite method of creating and working with components.

Since explanations are often only half as good without examples, I'll also add an example project which can be imported and explored locally. It contains a simple dataset and schema and a couple of pages to illustrate how I would build and use components in structr. Because I currently really like to work with TailwindCSS the example will be using it as well as a UI Kit for it. This will be LoFiUI because it can be redistributed (even though I like TailwindUI better).

Maybe Tailwind is the best thing since sliced bread, maybe it's just the newest hype. But one thing I can say for sure is that even a design-illiterate like me can create things that look (kind of) good. So naturally I'm interested to integrate it into my workflow with Structr.

The basics are explained quite well in the basic installation guide but it took me quite a while to get it production-ready which is why I'm writing this short tutorial.