ryannhg/elm-spa

an experiment for creating single page apps with Elm!

Note: the API is still experimental! (join the conversation on discourse)

trying it out

npm install -g elm-spa
elm-spa init your-project

just using the elm package?

elm install ryannhg/elm-spa

overview

module Main exposing (main)

import Application
import Generated.Pages as Pages
import Generated.Route as Route
import Global


main =
    Application.create
        { ui = Application.usingHtml
        , routing =
            { routes = Route.routes
            , toPath = Route.toPath
            , notFound = Route.NotFound ()
            }
        , global =
            { init = Global.init
            , update = Global.update
            , subscriptions = Global.subscriptions
            }
        , page = Pages.page
        }

keep your pages simple

(Instead of making everything an elm-fork-knife!)

• Pages.Index

page =
    Page.static
        { title = title
        , view = view
        }

• Pages.Counter

page =
    Page.sandbox
        { title = title
        , init = init
        , update = update
        , view = view
        }

• Pages.Random

page =
    Page.element
        { title = title
        , init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

• Pages.SignIn

page =
    Page.component
        { title = title
        , init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

while the top level stays easy to read!

init appRoute =
    case appRoute of
        Route.Index route ->
            index.init route

        Route.Counter route ->
            counter.init route

        Route.Random route ->
            random.init route

( It's like magic, but actually it's just functions. )

run the example

this project comes with an example in examples/html.

Here's how to run it:

1. git clone https://github.com/ryannhg/elm-spa.git && cd elm-spa

2. npm install

3. npm run dev