Getting started with PETAL

Underjord is a tiny, wholesome team doing Elixir consulting and contract work. If you like the writing you should really try the code. See our services for more information.

I recently wrote about the PETAL stack on Changelog.com and as I haven’t really had a chance to really get my hands dirty with it I decided that my next lab project should use it. So I set it up as a public repo and added the missing components manually by following some guides. You can see the commits or follow along.

So I used Phoenix 1.5.6 that I had already installed. The Phoenix docs should cover installation for you. My projects is called pubd, we’ll see if I get it go anywhere in that case that’ll be separate posts. I ran mix phx.new pubd --live to set up the Phoenix boilerplate project and that lead to this commit. The --live flag indicates that it should give us LiveView.

The next part was based on Chris McCord’s article about Alpine on Dockyard.

So I ran these commands to install Alpine.js:

cd assets
npm install alpinejs

// .. after the app.scss import
import Alpine from "alpinejs";
// .. in the let liveSocket configuration, after params
dom: {
    onBeforeElUpdated(from, to) {
        if (from.__x) {
        Alpine.clone(from.__x, to);
        }
    },
},

It lead to this Alpine installation commit and afterwards I decided to verify that I could successfully invoke Alpine and added this other Alpine verification commit.

Alpine was fairly straight-forward. Tailwind CSS was a bit more involved as that has much more dealings with preprocessing and the JS tooling. I followed the Phoenix 1.5 parts from this guide by Pragmatic Studio.

Rather than restate their very nice tutorial here which feels rude I want to offer you two options. Either you work through the above tutorial and gain all that related context they so kindly included. Or you work through my commit diff. Either way you should end up with a working Tailwind CSS install.

My approach included removing the default Phoenix styles which of course made the default application quite ugly. I couldn’t be bothered to fix that and instead I just wanted to make sure Tailwind was doing its thing. A commit for my test is also available.

Now with these installed you should be able to get going with working in this stack. Assuming you know a bit about Elixir and Phoenix you should be quite capable of learning LiveView. And when that won’t suffice you have Alpine.js. If you need visual tools, you should have good use out of Tailwind, or so I hear. I’ll link their docs here:

• The Elixir language guide
• The Elixir documentation on Hex
• The Phoenix documentation on Hex
• Alpine JS GitHub docs
• Tailwind CSS docs

I genuinely look forward to digging into more work with this stack. I’ve heard plenty of hype for Tailwind CSS and the way they use classes looks utterly wrong to me so far. So it should be a novel challenge for my sensibilities. Maybe I’ll hate it? Alpine truly seems to follow the Tailwind concept, so that’s similarly noisy. Maybe that’s all good pragmatism. I hope to find out.

Anyway, I hadn’t seen a guide for setting up the PETAL stack so I figured I’d put one out there. Bare-bones as it is.

In case you’d like to know more about what I do, sign up for the newsletter. I write more about Elixir, my projects and developer life there.

If you have thoughts, questions or want to otherwise get in touch, reach out via email lars@underjord.io or @lawik. If you want more of my writing, consider my newsletter.

Underjord is a 4 people team doing Elixir consulting and contract work. If you like the writing you should really try the code. See our services for more information.

Note: Or try the videos on the YouTube channel.