Before we get started, we need to install and configure a few tools essential for learning Elm.
- Why Node.js?
- This book is all about learning a language for building client-side applications. So why do we need to install Node.js? We need it for two reasons:
- Node.js comes with a package manager called NPM (Node.js Package Manager). Most tools and libraries for building front-end applications including a few in the Elm ecosystem are distributed as NPM packages. Therefore, you need it in your arsenal to be a productive Elm programmer.
Follow the instructions on the official site to install Node.js on your computer. Node.js comes with NPM. So you don’t need to download them separately. Once installed, run the following command from the terminal to verify that you have Node.js 4.0 or higher installed. It doesn’t matter which directory you run this command from.
Installing Elm Platform
The Elm Platform bundles together most tools we need to work with Elm. Follow the instructions on the official site to install the Elm Platform on your computer. Once the installation is complete, run the following command from the terminal to verify that Elm is installed properly. It also doesn’t matter which directory you run this command from.
You should see the version number of the Elm Platform installed on your computer. We will be using the
0.18.0 version throughout the book unless mentioned otherwise.
Source Code Editor
This book will make you write a lot of code. Some of that code will be executed inside the terminal using elm-repl. Some will have to be saved in a file and compiled. Elm doesn’t come with a source code editor. So you are free to choose whatever you like. Out of the box, most editors don’t support features such as syntax highlighting and autocompletion that will significantly enhance the experience of writing Elm code. You will have to install a plugin for that. Select a plugin for your editor from the Configure Your Editor section in the official guide.
Because tab characters are syntax errors in Elm, don’t forget to configure your editor to insert spaces when the tab key is pressed.
The Elm compiler will accept any valid program, but the Elm community at large prefers those programs to be written in a certain style. In most other languages, we need to remember what that style is and follow them diligently. Not only does this take up extra space in our brain, but also distracts us when we are in the middle of solving a problem. elm-format tackles this issue by automatically formatting our code according to a set of rules standardized by the community. Although you don’t have to install
elm-format to follow along, I highly recommend that you do.
- elm-format Release Status
- As of this writing,
elm-formatis still in alpha. Don’t be surprised if the current format of your program looks different from the one 1.0.0 version of
elm-formatproduces in the future. Despite its alpha status, most community members are already using it, so you should be fine using it too. All code in the book that is meant to be saved in a file has been formatted using
elm-format is quite easy. Just run the following command from any directory in the terminal.
-g option above installs the package globally so that we can use the
elm-format command from anywhere in the terminal. Let’s see
elm-format in action. Create a new directory called
beginning-elm. It doesn’t matter where you create it. Also create a file called
TestElmFormat.elm inside that directory and add the following code to it.
Don’t worry about understanding the above code for now. It’s there to demonstrate how
Although the above code is valid in Elm, it doesn’t quite follow the Elm style guide. Let’s use
elm-format to fix that. Go to the
beginning-elm directory in the terminal and run this command:
You will see the following warning.
Answer y. Now if you look inside the
TestElmFormat.elm file, you will notice that
elm-format has nicely formatted the code as shown below.
If you want to bypass the warning, run
We won’t be needing the
TestElmFormat.elm file anymore. Go ahead and delete it, but keep the
elm-format from Source Editor
elm-format from the terminal whenever we change an Elm file can be tedious. Therefore, most source code editors offer a plugin for automatically running it every time we save an Elm file. Install a plugin for your editor from the official site. Some plugins require you to manually turn on the format on save option. Make sure to read the instructions (listed on the official site) on how to do that as well.