DEV Community

Dwayne Crooks
Dwayne Crooks

Posted on

GitHub Actions, Devbox, and Elm

I almost didn't write this post (which was originally titled "GitHub Actions and your Elm web application") because during my research I realized that Dillon and Jeroen did an amazing job discussing GitHub Actions on the Elm Radio Podcast. As a result, I had to rethink what else I could usefully add to the discussion. Around 00:28:21 they started to talk about the relationship between the checks that you have in your local environment versus the CI checks. In particular, at about 00:31:10, Jeroen mentions:

I really like having the CI do the same thing as what I would do locally. Or said another way, I would really like to do locally what I do in CI.

I feel the same way. However, they didn't provide any practical or compelling solutions for achieving that. So in this post we are going to discuss that very topic, i.e. how to set up your local environment and your CI environment so that you can do the same things in both without any hassle.

Enter Nix

Nix is a tool that allows you to make isolated, reproducible development environments in a declarative way. I previously shared how I use Nix in my Elm projects so you can read that post to learn more. However, Nix has a steep learning curve and for most Elm projects you won't need the full power of Nix. That's why I recommend Devbox.

Devbox

Devbox is a wrapper around Nix that makes Nix user friendly. I also previously shared how I use Devbox in my Elm projects so you can read that post to learn more. Other people have written great introductions to Devbox so I won't repeat it here. Upgrade your Development Environments with Devbox is a great read. If you prefer to watch a video, I recommend Nix for Everyone: Unleash Devbox for Simplified Development.

Let's proceed with an example.

Example: L-System Studio

L-System Studio is an interactive web application built with Elm that's designed to help users explore and visualize L-systems. I picked this project since it doesn't have a good build, test, and deploy workflow either locally or in CI.

Let's fix that. Here are the changes I made:

The project structure before

L-System Studio's project structure before

The project structure after

L-System Studio's project structure after

How to use the project now

Locally you can enter the Devbox shell and run the scripts in the bin directory.

devbox shell

# Build
build

# Test
elm-test

# Run checks
check

# Deploy
deploy
Enter fullscreen mode Exit fullscreen mode

In CI, you can run the same scripts using devbox run.

# Build
devbox run build

# Test
devbox run elm-test

# Run checks
devbox run check

# Deploy
devbox run deploy
Enter fullscreen mode Exit fullscreen mode

Here's the deploy workflow:

name: "Deploy"

on:
  push:
    branches:
      - 'main'
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # To access the gh-pages branch

      - name: Install devbox
        uses: jetify-com/devbox-install-action@v0.11.0
        with:
          enable-cache: 'true'

      - name: Run checks
        run: devbox run check

      - name: Deploy
        run: |
          git config user.name ${{ github.actor }}
          git config user.email devs@example.com
          devbox run deploy
Enter fullscreen mode Exit fullscreen mode

Even if you don't understand what's going on the main thing I want you to notice is that running your scripts in CI is not significantly different from running them locally.

Conclusion

Nix or Devbox can give you isolated, reproducible development environments that are as easy to use in CI as they are to use on your local machine. Thanks to those tools, working in CI doesn't have to be any harder than or different from working on your project locally. They provide a wonderful solution, just give them a try.

Further reading

Bonus: Some notes on GitHub Actions

In preparation for the article I didn't end up writing I took some notes and found links that were helpful to me that may also be helpful to others.

Subscribe to my newsletter

If you're interested in improving your skills with Elm then I invite you to subscribe to my newsletter, Elm with Dwayne. To learn more about it, please read this announcement.

Top comments (0)