Elm live-reloading with Broccoli

Browsersync + broccoli + Elm = awesome

I’m skimming through a bunch of “getting started” tutorials for Elm, and most of them show how to use webpack to automate building your Elm application.

I come from an Ember background. Ember, if you didn’t know, has first class build tooling that’s crafted on top of broccoli.

If you haven’t heard of broccoli, that’s ok. Think of it as a build automator, similar to grunt, that is pluggable and easy to use.

Specifically, there’s 4 plugins I used to get off the ground running:

broccoli-elm: handles compiling your elm project

broccoli-funnel: moves/filters files into output directories

broccoli-merge-trees: combines trees together

broccoli-browser-sync-bv: takes care of server live-reloads

Quick note: broccoli-browser-sync-bv is a fork of broccoli-browser-sync. There is a pull request pending. Once merged, I’ll switch to the upstream repo.

Also, check out browser sync’s documentation for more info/options.

Initial Project Layout

my-project/

|

|-- public/

| +-- index.html

|

|-- src/

| +-- app.elm

|

+-- elm-package.json

The index.html file is the container for your Elm application. It will look something like this:

Next, globally install the broccoli cli:

yarn global add broccoli-cli

Then, in your elm project root, install broccoli and the plugins

yarn add -D broccoli

yarn add -D broccoli-browser-sync-bv

yarn add -D broccoli-elm

yarn add -D broccoli-funnel

yarn add -D broccoli-merge-trees

Finally, add a Brocfile.js to your project root directory, like this:

Now you can use the broccoli-cli to build and/or serve your project:

To build your project:

broccoli build dist

Or, to serve your project locally

broccoli serve

Now you can access your project at http://localhost:3000 and it will automatically rebuild and reload when you modify your project.