check out todo.elm for the full code.

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

• Document: NoRedInk Style Guide​

• Thread: Code structure/architecture​

• Article: Tour of an Open-Source Elm SPA by Richard Feldman

• Video: The life of a file by Evan Czaplicki