How to structure an Elm project?

Do not overuse: Files are allowed to get quite big without needing to split them.

Problem
Solution
Readme.md
Todo.elm
check out todo.elm for the full code.
Main.elm
Page/Login.elm
Page/Todo.elm
Data/Task.elm
Data/Form.elm
Data/User.elm
importing Todo.Page.Login as LoginPage
importing Todo.Page.Todo as TodoPage
type Model =
LoginPage LoginPage.Model
| TodoPage TodoPage.Model
type Msg =
LoginSpecific LoginPage.Msg
| TodoSpecific TodoPage.Msg
init : () -> Model
update : Msg -> (Model, Cmd Msg) -> (Model, Cmd Msg)
view : Model -> Html Msg
subscription : Model -> Sub Msg

Question

How should I structure my Elm project?

Answer

Use the following file structure:

  • Main.elm - Contains the main code

  • Data.elm - Contains utility functions for types (like constants)

    • Data/.. - Contains types. Group them logically, for example User and UserForm into Data/User.elm.

  • View.elm - Contains utility functions for views (like view specific constants and very general function.)

    • View/.. - Contains different Views. Sometimes a type has different views. A login page might have a special view for a wrong login.

  • Page.elm - Contains utility functions for pages. For page-transitions its handy to store the different models in here.

    • Page/.. - Contains a Model/View/Update for every page.

  • .. - in the same style you can add your project specific folders like a separate folder for validation.

Further reading