Earlier when we built a simple web page in Elm, we first created a file with .elm extension and put our Elm code in it. We then compiled it to JavaScript using elm-make. After that we referenced the output file (elm.js) from index.html to load our Elm application into the browser. That was a lot of steps just to see the result of our Elm code. Elm provides an interactive development tool called elm-reactor that lets us see the result of our code instantly. Go to the beginning-elm directory in the terminal and run this command: elm-reactor. You should see something like this.

$ elm-reactor

elm-reactor 0.18.0
Listening on http://localhost:8000

elm-reactor has created a development server on port 8000.

If you have another server running on port 8000, you need to terminate it by hitting Ctrl + c from the terminal. Otherwise, elm-reactor won’t be able to launch a development server.

If you visit http://localhost:8000/ from a browser, you will see the contents of our root project directory beginning-elm. You will also see a list of packages our project depends on and the project metadata contained in elm-package.json file.

Right now the Package Information section shows a generic text. Let’s change it to a description that reflects our application’s purpose. Change summary key’s value in elm-package.json as shown below.

    "version": "1.0.0",
    "summary": "A sample app for learning web application development with Elm.",

If you refresh the page at http://localhost:8000/ you should see the new description under Package Information. As of this writing, if the description is longer than 80 characters, elm-reactor won’t display the package information and dependencies sections.

Next click on the HomePage.elm link under File Navigation section. You should see something like this:

elm-reactor compiles the code in HomePage.elm file and renders it on a browser. Unfortunately, the page doesn’t look as nice as our original home page:

As of this writing, elm-reactor doesn’t support loading external CSS frameworks such as Bootstrap. It has other limitations too. For example, it lacks live reloading - a technique that reloads a page automatically when the underlying code changes - thus requiring us to refresh the page manually every time we make a small change to our code to see the result. Because of these limitations, elm-reactor might not provide the best development experience especially when building complex applications that demand a robust build process. Fortunately, there are multiple tools out there that are much more powerful than elm-reactor, for example elm-live and Webpack. We’ll cover elm-live in chapter 6. Despite all those limitations, elm-reactor is still great for prototyping simple applications and we will be using it throughout this book.

Back to top

New chapters are coming soon!

Sign up for the Elm Programming newsletter to get notified!

* indicates required