Setting up an Elm dev environment

#elm #DevelopmentEnvironment

I recently decided to try hacking with Elm, specifically to build a really simple Single Page App with some external CSS. elm reactor is great, but in order to see the external CSS applied to the app, I needed to load the compiled Elm code inside an index.html, and reactor just won't do that easily. Here's how I got about jury rigging a hot loading dev environment.

The npm packages I used are npm-watch, concurrently, and lite-server.

npm i -D npm-watch concurrenctly lite-server

In my package.json, I have the following top level sections:

...
  "scripts": {
    "make": "elm make src/Main.elm --output elm.js",
    "start": "concurrently \"npm-watch make\" \"lite-server\""
  },
  "watch": {
    "make": {
      "patterns": ["src"],
      "extensions": "elm"
    }
  },
...

And with an index.html that looks like this:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Matrix.lgbt</title>
        <link rel="stylesheet" href="public/assets/styles.css">
        <script src="elm.js"></script>
    </head>
    <body>
        <script>
            var app = Elm.Main.init();
        </script>
    </body>
</html>

The end result is with npm start, npm-watch will watch for any changes to Elm files in the src directory, compile them, and then lite-server will hot load the changes!