sporto/elm-example-app

An example Elm single page application

An example SPA in Elm

An example Elm single page application built for http://www.elm-tutorial.org/

Branches

• Master branch covers Elm 0.19
• See https://github.com/sporto/elm-tutorial-app/tree/018 for Elm 0.18

Setup

• Install Elm
• Install Node

Install node packages:

npm i

Running the application:

In terminal run:

npm run start

Open http://localhost:3000

elm-example-app's Issues

Problems doing a conditional redirect

Posted issue in wrong repository

moved issue to here sporto/hop#13

Error with inline comments: error

Here https://www.elm-tutorial.org/en/02-elm-arch/cover.html

Error with inline comments: error

Suggestions

A suggestion for how to improve this tutorial.

Each time you choose to include a dependency that is not absolutely necessary, you limit your audience. You've made several choices here that hurt. Do you really need StartApp? Should everyone who makes an Elm SPA use BassCSS and Webpack? These are not necessary when creating an Elm SPA, which is ostensibly what this tutorial is all about. By including them you confuse the issue. This is no longer the Elm SPA tutorial, it's the Elm SPA-Webpack-BassCSS-StartApp tutorial. Now everyone who doesn't want to use those dependencies has to do the mental work to pull them back out again.

There is no problem with teaching people how to use StartApp, BassCSS, or Webpack, but there is a better way: Make the base tutorial as simple as possible. Focus on the task at hand: setting up an SPA and organizing your Elm code into files and modules. Explain your reasoning.

THEN, in a "startapp" branch, show how to use StartApp as a shortcut. In another branch (from the master branch, not the startapp branch) show how to include BassCSS. In yet another, show how to use Webpack with Elm. Now you haven't turned a significant portion of your audience into second-class citizens. Better still, you can always add a gulp branch or a JSPM brach or whatever else later if you want to provide more options (or maybe you change the way you do things).

base tutorial (master branch)
|- with startapp branch
|- with webpack branch
|- with basscss branch
|- etc.

You may always build your own Elm apps with StartApp, BassCSS, and Webpack, but your readers will thank you if you don't force those choices on them.

Facing some issues changing "hash" routing to "path" routing

@sporto First of all Thanks a lot for this awesome tutorial. From start-to-end I didn't faced any discrepancy or errors executing the code given in tutorial on my dev machine.

Now coming to the issue I am facing:

In section Navigation approaches here you have mentioned the cons of using hash routing and as an alternative suggesting to use path routing which does look intuitive compared to the hash routing. I followed the example you referred to in https://github.com/sporto/elm-navigation-pushstate and updated my code such that it uses path routing.

The changes I made can be found below:

Msgs.elm

module Msgs exposing (..)

import Models exposing (Player)
import Navigation exposing (Location)
import RemoteData exposing (WebData)

type Msg
    = OnFetchPlayers (WebData (List Player))
    | OnLocationChange Location
    | ChangeLocation String  -- NOTE: Added this

Routing.elm

parseLocation : Location -> Route
parseLocation location =
    case (parsePath matchers location) of   -- NOTE: Updated `UrlParser.parseHash` with `UrlParser.parsePath` here
        Just route ->
            route

        Nothing ->
            NotFoundRoute



-- WHEN USING PATH-based Navigation
--    * the paths must start with a backward-slash (/)
--    * to match the path against a matcher use `UrlParser.parsePath` function
--      (refer parseLocation function above for e.g)

-- WHEN USING HASH-based Navigation
--    * the paths must start with a Hash-sign (#)
--    * to match the path against a matcher use `UrlParser.parseHash` function
--      (refer parseLocation function above for e.g)

-- Noticed the importance of / and # in README at
--  https://github.com/sporto/elm-navigation-pushstate#links
--      > Links should trigger a message to change the location when clicked, e.g. ChangeLocation "/users"

--  http://package.elm-lang.org/packages/elm-lang/navigation/2.1.0/Navigation#Location
--    > Note 2: These fields correspond exactly with the fields of document.location as described [here](https://developer.mozilla.org/en-US/docs/Web/API/Location)
--        where the targetLink mentions
--          ```
--            Location.pathname
--               Is a DOMString containing an initial '/' followed by the path of the URL..
--
--            Location.hash
--                Is a DOMString containing a '#' followed by the fragment identifier of the URL.
--          ```

playersPath : String
playersPath =
    "/players"

playerPath : PlayerId -> String
playerPath id =
    "/players/" ++ id

CustomHtmlEvents.elm (newly introduced)

module CustomHtmlEvents exposing (..)

import Html exposing (Attribute)
import Html.Events exposing (onWithOptions)
import Json.Decode as Decode

{-|
When clicking a link we want to prevent the default browser behaviour which is to load a new page.
So we use `onWithOptions` instead of `onClick`.
-}
onLinkClick : msg -> Attribute msg
onLinkClick message =
    let
        options =
            { stopPropagation = False
            , preventDefault = True
            }

    in
        onWithOptions "click" options (Decode.succeed message)

Players/List.elm

...
...
import CustomHtmlEvents exposing (onLinkClick)

...
...
..



editBtn : Player -> Html Msg
editBtn player =
    let
        path =
            playerPath player.id
    in
        a
            [ class "btn regular"
            , href path
            , onLinkClick (Msgs.ChangeLocation path)  -- NOTE: Added this attribute
            ]
            [ i [ class "fa fa-pencil mr1" ] [], text "Edit" ]

Players/Edit.elm

...
...
import CustomHtmlEvents exposing (onLinkClick)

...
...
..


listBtn : Html Msg
listBtn =
    let
        path =
            playersPath
    in
        a
            [ class "btn regular"
            , href path
            , onLinkClick (Msgs.ChangeLocation path) -- NOTE: Added this attribute
            ]
            [ i [ class "fa fa-chevron-left mr1"] [], text "List" ]

And that does work! Please refer the screenshots attached while navigating:

1.png (top route)

2.png (Player route)

3.png (Players route accessed via clicking the List link on top-left in 2.png)

Now what I am unable to understand is that when I try to access routes clicking navigation links they work. However when I manually change the route in browser's address bar like

http://localhost:3000/players I get following

http://localhost:3000/players/2 I get following

http://localhost:3000/ - This one does work by showing the Listing.

http://localhost:3000/#players - This one too works by showing the Listing but I am wondering why? Why this "hash" routing works?

However http://localhost:3000/#players/2 doesn't work.

So I am seeking your help in understanding the above behavior regarding manually changing the URL in address bar and they returning 404 response and how to fix them up to behave as expected i.e. whether I type in the URL or use navigation button or links they should show the desired data.

I have just started learning Elm and also novice to Functional Programming so please bear me on any questions I asked which sound silly to you.

Again Thank you so much for this wonderful tutorial. It demonstrates sheer clarity you have with this tutorial and is definitely one of the foremost resources one should refer to get started with Web App Development with Elm and at the same time getting acquainted the language's core concepts.

Suggestion: syntax

Hi

I've just read the tutorial, clearly written and nice to follow!
My suggestion is to add some explanation of the syntax used in the code.
For example, Records are mentioned ( https://www.elm-tutorial.org/en/01-foundations/06-type-aliases.html ), but the syntax for updating a record is not explained.

let
   updatedPlayer =
      { player | level = player.level + howMuch }
in
      ( model, savePlayerCmd updatedPlayer )

Also syntax let in is not explained in the tutorial.

But besides those, i think all is understandable.

tutorial not working on the routing step

Hi,
I'm doing the tutorial and I'm here: http://www.elm-tutorial.org/070_routing/main_view.html
I have copy and past everything so it's not an error from me.

I have this error:

-- NAMING ERROR ------------------------------------------------- ./src/View.elm

Cannot find pattern `Routing.PlayersRoute`.

26│     Routing.PlayersRoute ->
        ^^^^^^^^^^^^^^^^^^^^
`Routing` does not expose `PlayersRoute`. 

-- NAMING ERROR ------------------------------------------------- ./src/View.elm

Cannot find pattern `Routing.PlayerEditRoute`.

29│     Routing.PlayerEditRoute playerID ->
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`Routing` does not expose `PlayerEditRoute`. 

-- NAMING ERROR ------------------------------------------------- ./src/View.elm

Cannot find pattern `Routing.NotFoundRoute`.

32│     Routing.NotFoundRoute ->
        ^^^^^^^^^^^^^^^^^^^^^
`Routing` does not expose `NotFoundRoute`. 

My router just look like this:
http://www.elm-tutorial.org/070_routing/router.html

Possible bug in View.elm

Hello, I'm following your tutorial and in the Routing section there's this playerEditPage : Model -> PlayerId -> Html Msg function which looks like this:

playerEditPage : Model -> PlayerId -> Html Msg
playerEditPage model playerId =
    let
        maybePlayer =
            model.players
                |> List.filter (\player -> player.id == playerId)
                |> List.head
    in
        case maybePlayer of
            Just player ->
                Html.map PlayersMsg (Players.Edit.view player)

            Nothing ->
                notFoundView

However, I'm getting this error upon running nf start:

Module build failed: Error: Compiler process exited with error Compilation failed -- SYNTAX PROBLEM ---------------------------------------------- ./src/View.elm                                                                                                               
Arrows are reserved for cases and anonymous functions. Maybe you want > or >= instead?
43|             Nothing ->     

I'm on Ubuntu 16.04 with Elm 0.18. I've even copy pasted the original source code from here and it gives the same error. The code looks absolutely fine to me, it's a case of like any other and the signature of List.head seems to be Just a | Nothing like in the provided cases.

For consistency make all data mutations non-optimistic

They should happen after ajax request is done

Is there a tutorial (documentation) with version 0.19?

Compile error while decoding id

As I was going through the app before the commit on the git-book (sporto/elm-tutorial@c493d50) was merged, I ran into this error:

Elm Version: 0.18.0
Error:

ERROR in ./src/Main.elm
Module build failed: Error: Compiler process exited with error Compilation failed
-- TYPE MISMATCH ------------------------------------ ./src/Players/Commands.elm

The 2nd argument to function `map3` is causing a mismatch.

57|         Decode.map3 Player
58|>            (field "id" Decode.string)
59|             (field "name" Decode.string)
60|             (field "level" Decode.int)

Function `map3` is expecting the 2nd argument to be:

    Decode.Decoder PlayerId

But it is:

    Decode.Decoder String

db.json :

{
  "players": [
    {
      "id": "2",
      ...
    ...
}

Players/Models.elm:

type alias PlayerId =
    Int

Instead of changing PlayerId value to string as done in the git-book commit, it will be a good demonstration to convert string to int while decoding.

Promise is not defined

I am trying on windows 10, everything installed today so latest versions. Did have to also >npm install -g webpack-dev-server

I do end up with a non-responsive page titled 'Elm SPA example':

14:27:10 client.1   |     [74] (webpack)-dev-server/~/sockjs-client/lib/facade.js 723 bytes {0} [built]
14:27:10 client.1   |     [75] ./src/index.js 379 bytes {0} [built] [1 error]
14:27:10 client.1   |     [76] ./~/ace-css/css/ace.css 861 bytes {0} [built] [1 error]
14:27:10 client.1   |     [78] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
14:27:10 client.1   |     [79] ./~/font-awesome/css/font-awesome.css 888 bytes {0} [built] [1 error]
14:27:10 client.1   |     [81] ./src/index.html 56 bytes {0} [built]
14:27:10 client.1   |  ERROR in ./src/Main.elm
14:27:10 client.1   |  Module build failed: TypeError: Object function Object() { [native code] } has no method 'assign'
14:27:10 client.1   |      at Object.getOptions (C:\dev\elm-tutorial-app\node_modules\elm-webpack-loader\index.js:20:17)
14:27:10 client.1   |      at Object.module.exports (C:\dev\elm-tutorial-app\node_modules\elm-webpack-loader\index.js:40:28)
14:27:10 client.1   |   @ ./src/index.js 9:10-31
14:27:10 client.1   |  ERROR in ./~/css-loader!./~/font-awesome/css/font-awesome.css
14:27:10 client.1   |  Module build failed: ReferenceError: Promise is not defined
14:27:10 client.1   |      at LazyResult.async (C:\dev\elm-tutorial-app\node_modules\css-loader\node_modules\postcss\lib\lazy-result.js:227:31)
14:27:10 client.1   |      at LazyResult.then (C:\dev\elm-tutorial-app\node_modules\css-loader\node_modules\postcss\lib\lazy-result.js:131:21)
14:27:10 client.1   |      at processCss (C:\dev\elm-tutorial-app\node_modules\css-loader\lib\processCss.js:198:5)
14:27:11 client.1   |      at Object.module.exports (C:\dev\elm-tutorial-app\node_modules\css-loader\lib\loader.js:24:2)
14:27:11 client.1   |   @ ./~/font-awesome/css/font-awesome.css 4:14-73
14:27:11 client.1   |  ERROR in ./~/css-loader!./~/ace-css/css/ace.css
14:27:11 client.1   |  Module build failed: ReferenceError: Promise is not defined
14:27:11 client.1   |      at LazyResult.async (C:\dev\elm-tutorial-app\node_modules\css-loader\node_modules\postcss\lib\lazy-result.js:227:31)
14:27:11 client.1   |      at LazyResult.then (C:\dev\elm-tutorial-app\node_modules\css-loader\node_modules\postcss\lib\lazy-result.js:131:21)
14:27:11 client.1   |      at processCss (C:\dev\elm-tutorial-app\node_modules\css-loader\lib\processCss.js:198:5)
14:27:11 client.1   |      at Object.module.exports (C:\dev\elm-tutorial-app\node_modules\css-loader\lib\loader.js:24:2)
14:27:11 client.1   |   @ ./~/ace-css/css/ace.css 4:14-64
14:27:11 client.1   |  webpack: bundle is now VALID.

The use of stylesheets is unfortunate

Uncaught SyntaxError: Unexpected identifier

When I run -npm run dev- from the tutorial just after configuring the project with webpack, I get this
error in the console: Uncaught SyntaxError: Unexpected identifier

it points to this in app.js
/***/ function(module, exports) {

module Main (..) where  <<<<<<<<<<<

import Html exposing (..)
//...

as you would expect, the Loading... message is displayed on the screen since app.js can't load.

The project builds fine with - npm run build-
I made sure to check the versions are what was mentioned in the tutorial, and am plain stumped as to what is causing this.

billyr

The terminal gives no indication of anything wrong. ...bundle valid.

billyr

Congrats

Not an issue, rather a big congrats. An elm tutorial I actually got through without it all falling to pieces.
As general feedback I'd say it got quite complex quite quick, with the union types, pattern matching and the advanced navigation.
I'm still struggling with how functions and parameters are passed around. Often I miss in the syntax whether two words next to each other are two parameters, a function calling a parameter, a parameter being passed as another function calling a parameter, or something to do with a type constructor or what - but if anything that's an elm problem not yours.
Thank you for managing to explain the elm architecture concisely and understandably with the diagrams (although I'll need repeat exposure until it sinks in). Some people don't take into account we haven't all done functional reactive programming before. Navigation explanation on top of that was also a bonus.
Overall perhaps a bit of repetition on the way through and some variation on showing other ways things might be done would aid learning and embedding concepts in our minds even if at the expense of greater length.
If you can recommend other tutorials and places to go online for beginner discussion please do add them at the end as well.
Cheers

Proposal: Avoid foreman as global dependency

It would be more convenient to add foreman as a normal dependency and call it using npm start:

package.json

"dependencies": {
  ...
  "foreman": "^2.0.0"
  ...
},
...
"scripts": {
  "start": "nf start"
  ...
}```

0.18 Upgrade

Any plans to upgrade to 0.18? The major differences I've found so far are the new Http libraries and new Github repo location.

TogglePlayerPerk is in three places

Component Players.Edit wants to send a message to PerksPlayers, these are siblings modules

Main
-- PerksPlayers
-- Players.Edit

The way this is done now is:

• Players.Edit.view triggers PlayersActions.TogglePlayerPerk action.
• Players.update picks up PlayersActions.TogglePlayerPerk and returns a root fx, this root fx triggers a Actions.TogglePlayerPerk action
• Main.update picks up Actions.TogglePlayerPerk and creates a new fx that triggers PerksPlayers.Actions.TogglePlayerPerk
• Perks.update picks up PerksPlayers.Actions.TogglePlayerPerk and changes the collection

So the TogglePlayerPerk is in three places: Players, Main and PerksPlayers.

Error running npm run dev

npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: webpack-dev-server --port 3000
npm ERR! Exit status 3221226505
npm ERR!
npm ERR! Failed at the [email protected] dev script 'webpack-dev-server --port 3000'.

full log:npm-debug.zip

I followed the tutorial to the point of Webpack2 and get this error.

I also tried pulling the project directly from git and I get the same error. build and watch command works fine.

As you can see in the error above I'm running the latest node and npm versions.

Any ideas?

Q: Difference between Eng v1 and Eng v2?

Opening the tutorial pages at elm-tutorial.org, the site asks you to 'Choose a language.' What's the difference there between choosing 'English - v2' and 'English - v1'? In other words, how is v2 updated, if at all?

source directory is not src

In elm-package.json this is not changed in the source here:

...
"source-directories": [
    "src"
],
...

Webpack not serving anything

I've cloned the repo, npm install, npm run dev (which conveniently installed the elm packages for me), and npm run api. I visit http://localhost:3000 and get nothing--I see Cannot GET / with no errors in the console.

The output from webpack shows everything is fine, not sure what I could be doing wrong.

Deprecated

The tutorial is not completed and this app is deprecated, i think u know that, but, i'm just remembering.

You were making a good work, please go back.

Sorry about my english.

Error when running npm run dev

Having finished the chapter on webpack of your book I'm stuck with npm run dev command.
After cloning this repository and after git checkout 02-webpack and running the above command I'm getting this error:

Unfortunately I'm not particularly skilled with npm. Any ideas?
Your elm tutorial book is great, by the way :-)

Suggestion: switch webpack inline config to CLI

Hi sporto,

Thank you so much for this thorough and understandable elm tutorial! Awesome work!

Small suggestion. I'm probably just completely n00b as I haven't used webpack before, but to get the src folder as root on the dev server i had to supply --inline as a parameter in the package.json script, the inline option in the webpack.config didn't work for me. Most of it still works even if src is in the url, except the fonts aren't loaded. The webpack docs seem to be somewhat contradictive on this but on this page: https://webpack.js.org/configuration/dev-server/ it says that devServer.inline - CLI only. I'm totally guessing interpreting this to mean the webpack.config option doesn't work

EDIT: So, did not experience this on my linux setup, only on windows.

String id in db.json causing compile error

deleteConfirmationMailbox

Is the deleteConfirmationMailbox necessary?
Can we send a message directly to the port?

ERROR in Cannot find module 'glob'

See PR #23

Webpack complains that glob is not defined.