Building fast, data-heavy web applications can be tricky to implement and sometimes you face a trade-off between performance and interactivity. This is where Static Site Generation (SSG) comes into play. It generates HTML pages including the necessary data at build time. This allows you to then host just static files without the need for a complex backend. Observable Framework picks up on this idea and offers a great developer experience to develop curated data exploration oriented web apps and enables you to blend prebuilt static content with dynamic visualizations.
At build time, Observable Framework uses its concept of “data loaders” to fetch and aggregate data to be used. Because they are run at build time, they are not limited to JavaScript, there are several languages like Python, R and more you can use to create your data loader. And for data loaders, Observable Framework and Elasticsearch are a perfect match!
To get you started, we contributed an example to Observable Framework’s own list of data loaders. The Elasticsearch data loader example uses TypeScript and the Elasticsearch client to fetch and pre-aggregate data for a date histogram. It then converts the JSON output into CSV which can then be easily consumed by your statically generated site.
A big part of the data loader example is the helper file es_client.ts which simplifies how you’d connect to Elasticsearch in various scenarios, be it on your local machine or on Elastic Cloud. It uses environment variables that you can provide for example directly via CLI, using dotenv package or secrets in Github actions.
Lastly, the example gives you some ideas how to visualize your data, but of course that’s just meant as a starting point for your own more elaborate applications.
We very much hope this example is useful to get you started. If you’re using Elasticsearch with Observable Framework, we’d love to hear about your projects!