elm christmas

Running Elm apps

←Previous postNext post →

From your editor to the browser

A 3 min read written by
Ingar Almklov

In this blog post we will examine different ways of getting your Elm app to run in the browser. We will start with the simplest possible solution and work our way up to production-ready project scaffolding tools.

elm make

$ elm make src/Main.elm

The simplest way of getting your Elm app to run in the browser is arguably just by using the compiler directly. It takes one or more .elm files as input and outputs an index.html file that can be opened in the browser. This .html file will contain a <script> tag with the compiled JavaScript output of your Elm code.

See also

$ elm make --help

for more information on how to use elm make

elm reactor

Running elm make each time you make a change to your code can quickly become tiresome. Therefore, elm reactor exists. If you run

$ elm reactor

in the directory where your code lives, it will start a small web server on http://localhost:8000/. If you go to this page and navigate to your .elm file it will automatically compile your code and run it in your browser. If you make changes to your code, all you have to do is reload your browser window to see the updated output.

elm-live

Not having to run the compiler manually for each change is pretty smooth, but what if we didn't even have to reload our browser window to see new changes? Enter elm-live. elm-live is a more complete "dev server" that includes something called called "live reload" to achieve this.

If you give elm-live a .elm file it wil spin up a server (by default on http://localhost:8000/) that recompiles your program and reloads the web page each time you change a file. Neat!

$ elm-live src/Main.elm

See elm-live's GitHub repo for more information on what it can do.

create-elm-app

create-elm-app is an even more full-featured tool that is inspired by create-react-app. With it you can quickly get a complete Elm application up and running in seconds.

Crash course:

$ npm install create-elm-app -g # installs create-elm-app globally
$ create-elm-app my-app # creates an Elm app in a folder called my-app
$ cd my-app/

This will create all the files you need for a complete Elm application.

Now you can run

elm-app start

to open your app in the browser. As with elm-live it will recompile and reload your web browser when you change files!

create-elm-app will create a README.md file with more information on how to use it.

Pro-tip

If you use this on a real-world project with multiple collaborators it might be a good idea to have a project-local installation of create-elm-app so that you don't have to rely on each team member having the same version installed.

To achieve this, do the following

$ npm init -y # creates a package.json file
$ npm install create-elm-app # adds create-elm-app as a local dependency

Then, open up package.json and change the script node to the following:

  "scripts": {
    "start": "elm-app start",
    "test": "elm-app test",
    "build": "elm-app build"
  },

Now when someone clones your repository, all the have to do is run npm install and npm start to install everything they need and run the application.

←Previous postNext post →