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" | |
| } | |
| } |