Hi, I’m Erika Rowland (a.k.a. erikareads). Hi, I’m Erika. I’m an Ops-shaped Software Engineer, Toolmaker, and Resilience Engineering fan. I like Elixir and Gleam, Reading, and Design. She/Her. ← Constellation Webring → Published on

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 esgleamAs 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!

← Constellation Webring →