Earlier when we built a simple web page in Elm, we first created a file with
elm-make. After that we referenced the output file (
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 has created a development server on port
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
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.
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.