Skip to content

Instantly share code, notes, and snippets.

@sch

sch/Main.elm

Last active Jan 30, 2019
Embed
What would you like to do?
Minimum Elm boilerplate

This is a minimal boilerplate for an Elm app with Parcel.

Run npm install and npm start to start a development server.

{
"type": "application",
"source-directories": [
"."
],
"elm-version": "0.19.0",
"dependencies": {
"direct": {
"elm/browser": "1.0.0",
"elm/core": "1.0.0",
"elm/html": "1.0.0"
},
"indirect": {
"elm/json": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.0"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}
<html>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
var { Elm } = require("./Main.elm");
Elm.Main.init({
node: document.getElementById("app")
});
module Main exposing (main)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type alias Model =
{ count : Int }
initialModel : Model
initialModel =
{ count = 0 }
type Msg
= Increment
| Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
{ model | count = model.count + 1 }
Decrement ->
{ model | count = model.count - 1 }
view : Model -> Html Msg
view model =
div []
[ button [ onClick Increment ] [ text "+1" ]
, div [] [ text <| String.fromInt model.count ]
, button [ onClick Decrement ] [ text "-1" ]
]
main : Program () Model Msg
main =
Browser.sandbox
{ init = initialModel
, view = view
, update = update
}
{
"private": true,
"scripts": {
"start": "parcel index.html"
},
"devDependencies": {
"node-elm-compiler": "^5.0.1",
"parcel-bundler": "^1.10.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment