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 myapp

And initialize the project with yarn and elm.

yarn init
elm init

This will create package.json, elm.json, src/.

Then add the dependecies for parcel, using yarn.

yarn add -D parcel-bundler

Code

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.html

The 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!

Written by...
Kazushi Kawamura
Software Engineer based in Tokyo.
2019 © Kazushi Kawamura.