Gayan Hewa


Elm with Laravel

Elm with Laravel

Gayan Hewa's photo
Gayan Hewa
·Jul 21, 2020·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

I have been messing around with Elm the past week or so. Especially because of the potential to get a brainf*ck when getting started with Frontend development these days. Elm offers something really attractive. Simpler eco-system. Maybe I am drunk. But this is too attractive to not consider, especially for someone like me who is predominantly a backend developer.

After digging around, I wanted to do an experiment and try to see how I can get a small Elm component to render on one of my existing apps. This was surprisingly easy.

I started by:

  1. Creating an Elm file for the test component using the counter example
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


main =
  Browser.sandbox { init = init, update = update, view = view }


type alias Model = Int

init : Model
init =


type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1


view : Model -> Html Msg
view model =
  div []
    [  div [] [text "My fancy counter"]
        , button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]

Once I have this, I added another file to create the element and mount it.

import { Elm } from "./Counter.elm";

    node: document.querySelector("counter"),

Lastly, I added the newly created element <counter></counter> to my view.



Since I was using parcelJS, I didn't have to anything just had to make sure the js file was an entry point to the build command.

parcel build resources/assets/js/*.js --out-dir public/dist --public-url ./

So this is the final outcome, this is no way production-ready. But it helps me experiment with Elm for some parts of the application.

Alt Text

Share this