Embedding Gleam in my blog with esgleam
Previously in Embedding Gleam in my blog with Vite, I used the vite-gleam
plugin to bundle my compiled Gleam JS and embed it into my blog. Since then, the creator of the vite-gleam
plugin has created esgleam
As of the time of writing, the most recent version of esgleam
is 0.3.0. which allows me to bundle my Gleam JS without needing Node installed.
esgleam
downloads esbuild
as a pre-built executable which acts as a bundler for my project’s javascript.
I explained in detail how the Gleam application works in my previous article, so I will focus on how esgleam
makes it easier for me to deploy here.
esgleam
Adding esgleam
to my shiny_counter
project was simple:
gleam add esgleam
I could then run esgleam/install
to download the esbuild
executable:
gleam run -m esgleam/install
And then bundling the shiny_counter
Javascript was simple:
gleam run -m esgleam/bundle
By default esgleam
finds my src/shiny_counter.gleam
and turns it into dist/shiny_counter.js
.I found that the defaults were perfect for my needs, but esgleam
has an Advanced Usage which allows for specific customization of the bundling process.
That was all I needed to do to bundle the Javascript for my project. Then all I needed were a few more steps to embed the Javascript in my project:
Embedding the Javascript
I then copied the shiny_counter.js
to my static sites assets folder. Unlike when I bundled with vite
, I didn’t have a main.js
that enabled the listener for the project, so I need to that manually here:As a reminder, the gleam_example
is a custom attribute which shiny_counter
is using a CSS selector to find and mount the Lustre application to.
```=html
<div style="border: 1px solid">
<div gleam_example>
<script type="module">
import { main } from '/assets/shiny_counter.js'
document.addEventListener("DOMContentLoaded", () => {
const dispatch = main({});
});
</script>
</div>
</div>
```
Which works!Thanks to Enderchief for creating esgleam
to simplify the deployment story for Gleam browser Javascript!