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:

        <meta charset="UTF-8">
        <link rel="stylesheet" href="public/assets/styles.css">
        <script src="elm.js"></script>
            var app = Elm.Main.init();

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!