January 18, 2019
Setting up elm with parcel
Introduction
Parcel is a zero configuration web application bundler, and it is actual zero configuration.
Recently in v1.10.0 parcel added support for Elm, so I would like to try it.
Requirements
- yarn
- elm
Should be installed.
Installation
First let's create a project directory.
mkdir myapp
cd myappAnd initialize the project with yarn and elm.
yarn init
elm initThis will create package.json, elm.json, src/.
Then add the dependecies for parcel, using yarn.
yarn add -D parcel-bundlerCode
The first file you create will be src/index.html. This will be the entry point of the application, and parcel will be responsible for resolving any dependencies that is contained in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<main></main>
</body>
<script defer src="./index.js"></script>
</html>Next will the the elm application code. Let's copy and paste the incrementing number app from the elm guide and save it as src/Main.elm.
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = 0, update = update, view = view }
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]And finally we will create src/index.js, which is imported in src/index.html.
This will initialize the elm application, and renders it under the main tag.
import { Elm } from "./Main";
Elm.Main.init({
node: document.querySelector("main"),
});Running the server
Running the server is extremely easy in parcel.
yarn parcel src/index.htmlThe initial load will take a little longer, since it also installs the dependencies of elm, and also the missing dependencies in yarn.
These are the installed dependencies that parcel has automatically detected:
"elm-hot": "^1.0.1",
"node-elm-compiler": "^5.0.1",Summary
This article should give you a start when creating an elm application.
Happy Coding!
