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:

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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.