This example aims to highlight the way to compose elm modules.
In a single Main module, it refers to an outside counter module so we can interact with it.
File Counter.elm
:
This is a basic standalone module which exposes a counter (with increment / decrement buttons)
File Gallery.elm
:
This is a standalone module which exposes a images gallery:
- With a random generate button
- With a selected image
File Main.elm
:
This main module refers to counter module so it can render an allow interactions with it.
Main.elm
-- Main.Model
-- Main.Msg
-- Main.View
| Counter.elm
-- Counter.Model
-- Counter.Msg
-- Counter.View
| Gallery.elm
-- Gallery.Model
-- Gallery.Msg
-- Gallery.View
Counter.elm
and Gallery.elm
can be considered here as sub-elements of Main.elm
Prerequisites: Homebrew
- Install elm:
brew install elm
- Install or update npm:
brew install npm
orbrew upgrade npm
- Install elm-live:
npm install -g elm-live
- Start application:
elm-live src/Main.elm --port=1234 --open -- --output=main.js
- Install elm:
apt-get install elm
- Install or update npm:
apt-get install npm
orapt-get upgrade npm
- Install elm-live:
npm install -g elm-live
- Start application:
elm-live src/Main.elm --port=1234 --open -- --output=main.js
- Install elm: Windows Installer
- Install or update npm: Node
- Install elm-live:
npm install -g elm-live
- Start application:
elm-live src/Main.elm --port=1234 --open -- --output=main.js
Written in Elm 0.19.0
Install elm-live: npm install -g elm-live
Start application: elm-live src/Main.elm --port=1234 --open -- --output=main.js --debug
Install elm-format following this startup guide: Install Elm format
This aims to format using Elm style guide when saving.