- Windows
- Ubuntu
- Download and install Visual Studio Code
- Download and install Nodejs
- Launch Visual Studio Code
- From the menu bar, chose File, Preferences, Extensions
- Install the extension “ElmLS”
- From the menu bar, chose File, Preferences, Settings
- Within Settings, navigate to Extensions, Elm configuration
- Change the settings of “Compiler” to
.\\node_modules\\.bin\\elmand change the settings of “Format Command” to.\\node_modules\\.bin\\elm-format - From the menu bar chose File, Open Folder
- Inside Documents, create a folder MyFirstElmProject and open it
- From the menu bar, chose Terminal, New Terminal
- Inside the terminal, enter and execute the command
npm install --save-dev elm elm-format - Inside the terminal, enter and execute the command
npx elm init, and confirm with enteringY<Enter> - From the menu bar, chose File, New File
- From the menu bar, chose File, Save File and save the file as
src/Main.elm - Enter the following source code in that file:
module Main exposing (..) import Html exposing (text) main = text "Hello world!"
- Auto-format the source code using the keyboard shortcut
Shift-Alt-F - From the menu bar chose File, Save
- Compile your example program using the keyboard shortcut
Ctrl+F5 - From the menu bar, chose File, New File
- From the menu bar, chose File, Save File and save the file as
index.html - Enter the following source code in that file:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My First Elm Project</title> </head> <body> <script src="elm.js"></script> <script> Elm.Main.init({ node: document.querySelector("main") }); </script> <main></main> </body> </html>
- Open the file
index.htmlwith your browser
Elm can be added very easily to an existing project, which uses npm as a package manager.
-
Install elm via npm locally:
npm install --save-dev elm elm-format
-
Install the VS Code extension elm: Elm Language Support for Visual Studio Code
-
Initialize elm with
npx elm init
It will ask, if it should create the file elm.json. Confirm with "Y". The file elm.json contains some basic dependencies.
npxis a small wrapper, that lets you execute command line tools, which are in the folder node_modules, but are not in available in the terminal. -
Configure the elm extension. The elm extension assumes, that elm is available globally in the command line, which it is not in this approach. Therefore, the location of the compiler has to be configured.
- Open settings with
Ctrl+,or under File > Settings > Settings - Search for "elm compiler".
- Enter "./node_modules/.bin/elm" as command.
- Search for "elm format".
- Enter "./node_modules/.bin/elm-format" as command.
- Open settings with
-
Add the folder elm-stuff to .gitignore. It is a temp folder for the elm compiler.
-
Create a hello world file src/Main.elm with the following content.
module Main exposing (..) import Html exposing (text) main = text "Hello there!"
-
Try auto format by pressing
Ctrl+Shirt+i. If you are not sure about the shortcut, you can look it up by pressingCtrl+p. Then type ">format". -
Compile with
npx elm make src/Main.elm. That will create the files elm.js and index.html.To embed the resulting JavaScript code on an existing page, run
npx elm make src/Main.elm --output=dist/js/elm.js
You can also add a script to the package.json from npm:
{ "script": { "build-elm": "elm make ./src/Main.elm --output=dist/js/elm.js" } }In the npm scripts there is no need to use
npx. -
To include the result in an existing html file, add the following:
<div id="elmApp"></div> <script src="js/elm.js"></script> <script> const elmApp = Elm.Main.init({ node: document.getElementById("elmApp") }); </script>
This will replace the div element with the elm application, in our case the div will be replaced by the plain text "Hello there!".
-
Now open the html file by whatever means your project provides.