node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

elm-live

Travis – build statusCoveralls – test coverageDavid – status of dependenciesCode style: airbnb

elm-live

A flexible dev server for Elm
Live reload included!

 

Screencast

 

INSTALLATION

# Globally for a user: 
npm install --global elm elm-live
 
# …or locally for a project: 
npm install --save-dev elm elm-live

If you’d rather bring your own global elm-make, npm install --global elm-live will do.

Note that you need node 6.0+ to run the tool natively. But if you’re stuck on an older version, don’t worry! Rumour has it that you can transpile the code to ES5!

 

SYNOPSIS

elm-live [...<options>] [--] ...<elm-make args>  
elm-live --help

 

DESCRIPTION

First, we spawn elm-make with the elm-make args you’ve given.

When the build is ready, we start a static HTTP server in the current directory. We inject a live reload snippet into every HTML file we serve. Every time a static file has changed, we’ll reload your app in all browsers you’ve opened it with. (Mobile and IE included!)

We also watch all *.elm files in the current directory and its subdirectories. Whenever you change, add or remove one of them, we’ll rebuild your program and reload the page.

 

OPTIONS

--port=PORT

Set the port to start the server at. If the port is taken, we’ll use the next available one. PORT should be a valid port number. Default: 8000.

--path-to-elm-make=PATH

An absolute or relative path to elm-make. If you’ve installed elm-platform locally with npm (npm install --save-dev elm), you’ll likely want to set this to node_modules/.bin/elm-make. Default: elm-make.

--host=HOSTNAME|IP

Set the host interface to attach the server to. Default: localhost.

--dir=PATH

The base for static content. Default: ..

--open

We’ll open the app in your default browser as soon as the server is up.

--no-recover

When elm-make encounters a compile error, we keep elm-live running and give you time to fix your code. Pass --no-recover if you want the server to exit immediately whenever it encounters a compile error.

--pushstate

Serve index.html on 404 errors. This lets us use client-side routing in Elm. For instance, we can have a URL like http://localhost:8000/account get handled by the Elm navigation package instead of failing with a 404 error.

--before-build=EXECUTABLE

Run EXECUTABLE before every rebuild. This way you can easily use other tools like elm-css or browserify in your workflow.

Heads up! At the moment, we only allow running a single executable without parameters. If you need more than that, please give us a shout at https://git.io/elm-live.before-build-args.

--after-build=EXECUTABLE

Just like --before-build, but runs after elm-make.

--help

You’re looking at it.

 

EXAMPLES

The simplest scenario:

$ elm-live Main.elm --open

Custom HTML file:

$ cat <<——— > index.html
  <!doctype html>
  <link rel="stylesheet" href="style.css" />
 
  <body>
    <div></div>
    <script src="elm.js"></script> 
    <script>Elm.Main.embed(document.querySelector("div"));</script> 
  </body>
———
$ elm-live Main.elm --output=elm.js --open

Support client-side routing in Elm:

$ elm-live Main.elm --open --pushstate

 

TROUBLESHOOTING

my app is not getting reloaded

Your HTML file must have an explicit <body> tag, so that we know where to inject a LiveReload snippet.

I’m seeing a SyntaxError about block-scoped declarations

If you’re seeing one of these:

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

make sure you’re running on node 6+. If you can’t upgrade, consider transpiling source/elm-live.js to ES5.

By the way, yarn should be warning you about installing incompatible packages. To get the same behavior in npm, set the engine-strict flag.

 

CREDITS

Many thanks to Evan Czaplicki, the creator of Elm, for git.io/elm-make – the most brilliant language compiler the world has ever seen! Without elm-make, elm-live would be a car without an engine.

Many thanks to Matt DesLauriers for the wonderful git.io/budo-server. That’s what does the heavy lifting on the static server side.

Warm thanks to our amazing contributors! Credits to Brian for making Windows support possible, Kurt for allowing a configurable --host and Josh for his work on enabling client-side navigation. Thanks to Ryan batch updates are nice and fast. Kudos to Mathieu, Rémy and Nicolas for making the developer experience smoother and to Gabriel for the --before-build option. Many thanks to Noah for making sure elm-live works smoothly with elm-test.

 

LICENSE

MIT © Tomek Wiszniewski