Install Elm using asdf.
$ asdf plugin add elm
$ asdf list all elm # List available versions of Elm.
$ asdf install elm <version>
$ asdf local elm <version>
Execute the following command to create an Elm project.
$ elm init
Create a new file named Main.elm with the following content in the src directory.
module Main exposing (..)
import Html exposing (text)
main =
text "Hello, World!"Execute the following command to compile Main.elm.
elm make src/Main.elm --output=main.js
Create an index.html file with the following content to embed the compiled main.js file into HTML.
<!DOCTYPE html>
<html>
<head>
<title>My Elm App</title>
</head>
<body>
<div id="elm-root"></div>
<script src="main.js"></script>
<script>
var app = Elm.Main.init({
node: document.getElementById('elm-root')
});
</script>
</body>
</html>We will use elm-live to launch the development server and run HelloWorld. elm-live allows for more efficient development as it possesses a hot-reloading feature that the standard elm-reactor does not have. Install elm-live with the following command.
$ npm install --global elm-live
After installation, execute the following command to launch the development server.
$ elm-live src/Main.elm --start-page=index.html -- --output=main.js
Please confirm that the server is running at localhost:8000 and that "HelloWorld" is being displayed.
Set up to automatically format elm source file using elm-format in VSCode when saving. Execute the following command to install elm-format.
$ npm install -g elm-format
Install Elm Plugin for Visual Studio Code and add the following configuration to the VSCode settings file.
"[elm]": {
"editor.formatOnSave": true
},
Execute the following command to install elm-test.
$ npm install -g elm-test
Execute the following command to install the packages needed for testing in Elm.
$ elm install elm-explorations/test
We will create the following function as a subject for testing.
add : Int -> Int -> Int
add x y =
x + yTo test the above function, create test code with the following content in the tests/Test.elm.
module Tests exposing (..)
import Expect
import Main exposing (add)
import Test exposing (..)
all : Test
all =
describe "add function"
[ test "adds two numbers" <|
\_ ->
add 1 2
|> Expect.equal 3
]Execute the following command to run all tests.
$ elm-test