HTMX and Elixir

The algorithm has been recommending me a lot of HTMX videos recently.

Even though I understand the basics behind it, as a Liveview user, I never really felt the need to explore it.

Until last night!

Where I though that I should at least put together an example for myself.

Here is what I did:

Setup

I started off with a new Elixir project.

mix new htmixir --sup

I want to have supervision enabled as it is best practice to have some form of supervision in place for a web server.

Next, we’ll be adding a simple web server. I chose to use Bandit as my web server instead of going with the usual suspect; Phoenix as I wanted to keep my footprint small. I also was looking for an excuse to play around with it 🙂

Dependencies

Now let’s add our dependencies. We’ll start by adding Bandit in our mix.exs

defp deps do
  [
    {:bandit, "~> 1.0"}
  ]
end

Luckily, bandit pulls in Plug which is what we’ll be using to implement the various endpoints.

Preparation

Let’s start by having an Express.js or Sinatra style router. We can achieve this with Plug.Router.