How I use Devbox in my Elm projects

Before I went on my Christmas vacation last year I wrote an article on how I use Nix in my Elm projects. At the time, I was pleased with my set up. However, not even a month would go by before my satisfaction was questioned. In early January, Carlo Ascani asked a question, on the Elm Discourse, about his Umbra project. I decided to explore his project and I soon discovered two files, devbox.json and devbox.lock, I had never seen before. This piqued my curiosity and I had to learn more. I followed the link to the Devbox website and feverishly read the docs. I... was... hooked. I was pleasantly surprised by its simplicity and it seemed to fit my use cases really well.

What is Devbox?

Devbox is a tool that creates isolated, reproducible development environments that run anywhere. It's based on Nix but no Nix knowledge is required. It's approachable and intuitive.

How I use Devbox in my Elm projects

I've been using Devbox in the same way I was using Nix flakes in my Elm projects. The major difference, as you'd see in the example below, is that there's much less noise in the configuration.

Here's an example flake.nix taken from my elm-integer library.

{
  description = "A developer shell for working on elm-integer.";

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs?ref=23.11";
    flake-utils.url = "github:numtide/flake-utils";
  };

  outputs = { self, nixpkgs, flake-utils, ... }:
    flake-utils.lib.eachDefaultSystem (system:
      let
        pkgs = nixpkgs.legacyPackages.${system};
      in
      {
        devShells.default = pkgs.mkShell {
          name = "elm-integer";

          packages = with pkgs.elmPackages; [
            elm
            elm-doc-preview
            elm-format
            elm-optimize-level-2
            elm-test
            pkgs.caddy
            pkgs.nodejs_20
            pkgs.nodePackages.terser
            pkgs.shellcheck
          ];

          shellHook =
            ''
            export project="$PWD"
            export build="$project/.build"
            export PATH="$project/bin:$PATH"

            npm install --loglevel silent
            '';
        };
      }
    );
}

Here's the corresponding devbox.json.

{
  "packages": {
    "caddy": {
      "version": "latest",
      "disable_plugin": true
    },
    "elmPackages.elm": "latest",
    "elmPackages.elm-doc-preview": "latest",
    "elmPackages.elm-format": "latest",
    "elmPackages.elm-optimize-level-2": "latest",
    "elmPackages.elm-test": "latest",
    "nodejs_20": "latest",
    "nodePackages.terser": "latest",
    "shellcheck": "latest"
  },
  "env": {
    "project": "$PWD",
    "build": "$PWD/.build",
    "PATH": "$PWD/bin:$PATH"
  },
  "shell": {
    "init_hook": [
      "npm install --loglevel silent"
    ]
  }
}

More examples

freeCodeCamp

I converted all my freeCodeCamp Front End Development Libraries Projects from Nix flakes to use Devbox.

• Random Quote Machine
• Markdown Previewer
• Drum Machine
• Calculator
• 25 + 5 Clock

These projects use Caddy as my local development server, Dart Sass for converting my Sass files to CSS, elm, elm-format, elm-optimize-level-2, elm-review, elm-test (only in Calculator), ShellCheck to find bugs in my shell scripts, and Terser to mangle and compress JavaScript code.

dwayne/elm-hello

This project uses HTMLMinifier, optipng, and zopfli to create a custom production Elm build pipeline. You can see how I make use of these tools in this build script. Here are the results in case you're interested. I used the same ideas from this project to build and deploy dwayne/elm-conduit, which you can learn more about in my article Yet Another Tour of an Open-Source Elm SPA.

Finding Nix packages

Nixhub.io is a user-friendly website built for Devbox that makes it easy for you to find the right Nix package for your project.

Conclusion

With little to no learning curve, Devbox is easy to use and it's been a valuable addition to my Elm development workflow. I'm happy to have found it.

Comments

[Dwayne Crooks]

On the Elm Slack, pascal.lemerrer shared

On MacOS there is a blocking issue with Devbox and Elm since a few weeks ago.

A workaround is to use this line in the devbox.json file to add Elm:

"github:NixOS/nixpkgs/23.11#elmPackages.elm": "",

instead of

"elmPackages.elm": "latest",

[Dirk Johnson]

Thanks for sharing this. Excited to look into Devbox for my team.