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.
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
| +-- index.html
| +-- app.elm
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
Now you can access your project at http://localhost:3000 and it will automatically rebuild and reload when you modify your project.