How to Use elm-live with Visual Studio Code

Today is a quick tip on how to use elm-live. I highly recommend this tool as it speeds up the development process.

The elm-live is a local server for Elm. It is similar to elm-reactor, but it gives you a live reloading in addition to a local web server.

Installing elm-live

elm-live uses npm for installation, so you’d need NodeJs installed.

You can install elm-live either globally or locally:

# Globally for a user:
npm install --global elm elm-live

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

I personally prefer a local installation for each Elm project.

Running elm-live

If installed globally, you can run it using the following command:

$ elm-live Main.elm --open

# to compile into a separate JavaScript file and use custom HTML
$ elm-live Main.elm --output=main.js --open

To run locally you can call elm-live like this:

$ node ".\node_modules\elm-live\bin\elm-live.js" Main.elm --output=main.js --open

Once running, you can access your application at http://localhost:8000. If you’ll change your Elm code, elm-live will rebuild the project and will reload a page.

This is a tool that makes working with Elm easier.

Using elm-format in Visual Studio Code
Adding Your Snippets to Visual Studio Code