Elm Land

https://elm.land/guide
Admin
Elm Land is a production-ready framework for building reliable web applications with Elm. It...
Tokens:27,835
Snippets:180
Trust Score:6.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Create a new Elm Land project

Source: https://elm.land/guide/index

This command uses the elm-land CLI tool to initialize a new Elm Land project in a specified folder, 'quickstart' in this example. It sets up the basic project structure including elm.json, elm-land.json, and the initial homepage.

```sh
elm-land init quickstart
```

--------------------------------

### Run Elm Land development server

Source: https://elm.land/guide/index

This command starts the built-in development server for your Elm Land project. After running, you can access your application in a web browser, typically at http://localhost:1234.

```sh
elm-land server
```

--------------------------------

### Default Elm Land project file structure

Source: https://elm.land/guide/index

This snippet shows the default file structure created when a new Elm Land project is initialized. It includes Elm's package.json, Elm Land's configuration, and the main homepage file.

```bash
quickstart/
  |- elm.json           # 🌐 Elm's `package.json` file
  |- elm-land.json      # 🌈 Elm Land configuration
  |- src/
     |- Pages/
        |- Home_.elm    # 🏡 The homepage for our app
```

--------------------------------

### Install Elm Land CLI globally

Source: https://elm.land/guide/index

This command installs the Elm Land command-line interface tool globally using npm. It allows you to create new projects, add features, and run the development server. Node.js v18.16.0 or higher is a prerequisite.

```sh
npm install -g elm-land@latest
```

--------------------------------

### Start the Elm Land development server

Source: https://elm.land/guide/user-auth

Starts the Elm Land development server, making the project accessible at http://localhost:1234.

```sh
elm-land server
```

--------------------------------

### Initializing NPM and Installing Three.js

Source: https://elm.land/guide/working-with-js

This section outlines the initial steps to set up a JavaScript environment for integrating web components, specifically demonstrating how to initialize a `package.json` file and install the `three` library using npm.

```sh
npm init -y
```

```sh
npm install --save three
```

--------------------------------

### Creating a new Elm Land project

Source: https://elm.land/guide/pages-and-routes

Commands to initialize a new Elm Land project, navigate into its directory, and start the development server. This sets up a basic application running locally.

```sh
elm-land init pages-and-routes
cd pages-and-routes
elm-land server
```

--------------------------------

### Install Elm `elm/json` package

Source: https://elm.land/guide/rest-apis

Command to install the `elm/json` package using `npx elm install`, required for decoding and encoding JSON data in Elm.

```sh
npx elm install elm/json
```

--------------------------------

### Start the Elm Land development server

Source: https://elm.land/guide/user-input

This command starts the local development server for the Elm Land project. It compiles the Elm code and serves the application, allowing developers to view and test their changes in a web browser.

```sh
elm-land server
```

--------------------------------

### Running Elm Land Server with Environment Variable

Source: https://elm.land/guide/working-with-js

Command line example demonstrating how to start the 'elm-land server' while simultaneously setting an environment variable like NODE_ENV, which can then be accessed within the Elm application.

```sh
NODE_ENV=production elm-land server
```

--------------------------------

### Bash: Setting up the Node.js Backend API Server

Source: https://elm.land/guide/user-auth

These commands demonstrate how to clone and run the example Node.js API server locally. This server provides the necessary `/api/sign-in` endpoint for the Elm frontend to interact with a real backend for user authentication.

```bash
# Clone the backend API project into an "api-server" folder
npx degit elm-land/elm-land/examples/05-user-auth/api-server api-server

# Enter that folder, and run the project
cd api-server
npm start
```

--------------------------------

### Install Elm `elm/http` package

Source: https://elm.land/guide/rest-apis

Command to install the `elm/http` package using `npx elm install`, which is necessary for sending HTTP requests in Elm applications.

```sh
npx elm install elm/http
```

--------------------------------

### Elm Land File-Based Routing Examples

Source: https://elm.land/guide/pages-and-routes

Illustrates how Elm Land's file-based routing system maps file paths in `src/Pages` to corresponding URL routes. This includes examples for static pages, nested paths, and dynamic segments using special file naming conventions.

```APIDOC
Page: Home
  Elm file: src/Pages/Home_.elm
  URLs: /

Page: Sign in
  Elm file: src/Pages/SignIn.elm
  URLs: /sign-in

Page: Account Settings
  Elm file: src/Pages/Settings/Account.elm
  URLs: /settings/account

Page: User
  Elm file: src/Pages/User_.elm
  URLs: /elm, /elm-land, /ryannhg

Page: Repo
  Elm file: src/Pages/User_/Repo_.elm
  URLs: /elm/compiler, /elm-land/vscode, /ryannhg/elm-spa

Page: Code Explorer
  Elm file: src/Pages/User_/Repo_/Tree/Branch_/ALL_.elm
  URLs: /elm-land/elm-land/tree/main/README.md, /elm-land/elm-land/tree/main/examples/01-hello-world/elm.json, /elm/compiler/tree/master/roadmap.md
```

--------------------------------

### Install Elm HTTP Package

Source: https://elm.land/guide/user-auth

Installs the `elm/http` package, which is necessary for making HTTP requests in an Elm Land project.

```sh
elm install elm/http
```

--------------------------------

### Start the Elm Land development server

Source: https://elm.land/guide/rest-apis

This command starts the local development server for the Elm Land project, making the application accessible in a web browser, typically at `http://localhost:1234`. It enables live reloading during development.

```sh
elm-land server
```

--------------------------------

### Example JSON Request Body for Sign-In

Source: https://elm.land/guide/user-auth

An example of the JSON payload that would be sent as the request body for the sign-in API, showing the structure with email and password fields.

```json
{ "email": "ryan@elm.land", "password": "secret123" }
```

--------------------------------

### Example CSS for Elm Land Static File

Source: https://elm.land/guide/pages-and-routes

Provides a basic CSS stylesheet (`main.css`) to be placed in the `static` folder, demonstrating simple styling for body, layout, and sidebar elements within an Elm Land application.

```css
/* static/main.css */

body {
  padding: 32px;
}

.layout {
  display: flex;
  gap: 16px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
```

--------------------------------

### Initialize a new Elm Land project

Source: https://elm.land/guide/user-input

This command initializes a new Elm Land project with the specified name, creating the necessary directory structure and configuration files. It's the first step to start a new Elm Land application.

```sh
elm-land init user-input
```

--------------------------------

### Defining and Visualizing Catch-All URL Patterns in Elm Land

Source: https://elm.land/guide/pages-and-routes

Illustrates the concept of catch-all routes (*) for handling URLs with unknown depth, providing the pattern and real-world examples to help visualize how such routes function.

```txt
/:owner/:repo/tree/:branch/*
```

```txt
/elm/compiler/tree/master/README.md
/elm-land/elm-land/tree/main/docs/README.md
/elm-land/elm-land/tree/main/examples/01-hello-world/elm.json
```

--------------------------------

### Start PokeAPI cache server with delay

Source: https://elm.land/guide/rest-apis

Command to start the Node.js PokeAPI cache server, setting an intentional `DELAY` of 1000ms on each request to simulate loading states.

```sh
DELAY=1000 npm start
```

--------------------------------

### Initialize Elm Model with a starting value

Source: https://elm.land/guide/user-input

This Elm code defines the `init` function, which provides the initial state for the `Model` when the page loads. It sets the `counter` field to `0`, ensuring the application starts with a predictable and desired initial value.

```elm
init : Model
init =
    { counter = 0
    }
```

--------------------------------

### Run the Elm Land development server

Source: https://elm.land/guide/working-with-js

Starts a local development server for the Elm Land project, making the application accessible in a web browser, typically at http://localhost:1234.

```sh
elm-land server
```

--------------------------------

### Send initial data to Elm using JavaScript flags

Source: https://elm.land/guide/working-with-js

This JavaScript snippet demonstrates how to use the `flags` function in `src/interop.js` to send initial data, such as a string message, to the Elm application when it starts up.

```js
// ...

export const flags = ({ env }) => {
  return {
    message: "Hello, from JavaScript flags!"
  }
}

// ...
```

--------------------------------

### Make GET Request to PokeAPI for Pokemon Details

Source: https://elm.land/guide/rest-apis

Demonstrates the HTTP GET request URL to fetch detailed information for a specific Pokemon like 'bulbasaur' from the local PokeAPI endpoint.

```txt
GET http://localhost:5000/api/v2/pokemon/bulbasaur
```

--------------------------------

### Defining Nested Dynamic Routes in Elm Land

Source: https://elm.land/guide/pages-and-routes

Explains how to define and use nested dynamic routes like /:user/:repo to capture multiple URL parameters in Elm Land applications, demonstrating both the command-line setup and the Elm page module.

```sh
elm-land add page:view /:user/:repo
```

```elm
module Pages.User_.Repo_ exposing (page)

import Html exposing (..)
import View exposing (View)

page : { user : String, repo : String } -> View msg
page params =
    { title = "Pages.User_.Repo_"
    , body =
        [ text ("/" ++ params.user ++ "/" ++ params.repo)
        ]
    }
```

--------------------------------

### Example API Error Response JSON

Source: https://elm.land/guide/user-auth

An example of a JSON response body returned by an API when form fields like email and password are invalid, typically with a 400 status code. It shows a list of errors, each with a `field` and `message` property.

```JSON
Status code: 400

{
  "errors": [
    {
      "field": "email",
      "message": "Email is required."
    },
    {
      "field": "password",
      "message": "Password is required."
    }
  ]
}
```

--------------------------------

### Elm `init` and `update` for Asynchronous API Interaction

Source: https://elm.land/guide/rest-apis

Demonstrates the initial setup of an Elm application's `Model` to `Api.Loading` and initiates an API request using a placeholder `Api.PokemonList.getFirst150` command. The `update` function handles the `PokeApiResponded` message, updating the model with `Api.Success` on success or `Api.Failure` on HTTP error.

```elm
module Pages.Home_ exposing (Model, Msg, page)

import Api
import Api.PokemonList
import Http

-- ...

init : ( Model, Cmd Msg )
init =
    ( { pokemonData = Api.Loading }
    , Api.PokemonList.getFirst150
        { onResponse = PokeApiResponded
        }
    )

-- UPDATE

type Msg
    = PokeApiResponded (Result Http.Error (List Pokemon))

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        PokeApiResponded (Ok listOfPokemon) ->
            ( { model | pokemonData = Api.Success listOfPokemon }
            , Cmd.none
            )

        PokeApiResponded (Err httpError) ->
            ( { model | pokemonData = Api.Failure httpError }
            , Cmd.none
            )

-- ...
```

--------------------------------

### Example JSON Response for Pokemon Details

Source: https://elm.land/guide/rest-apis

Illustrates the structure of the JSON response returned by the PokeAPI endpoint for a Pokemon's details, highlighting key fields such as name, id, sprites, and types.

```jsonc
{
    // ...
    "name": "bulbasaur",
    "id": 1,
    // ...
    "sprites": {
        // ...
        "other": {
            // ...
            "official-artwork": {
                // ...
                "front_default": ".../bulbasaur.png"
            }
        }
    },
    "types": [
        {
            "slot": 1,
            "type": {
                "name": "grass",
                "url": "http://localhost:5000/api/v2/type/12/"
            }
        },
        {
            "slot": 1,
            "type": {
                "name": "poison",
                "url": "http://localhost:5000/api/v2/type/4/"
            }
        }
    ]
}
```

--------------------------------

### Example of Successful Elm Flag Decoding Log

Source: https://elm.land/guide/working-with-js

This text snippet shows the expected output in the browser console when the Elm application successfully receives and decodes flags from JavaScript.

```txt
FLAGS: Ok { message = "Hello, from JavaScript flags!" }
```

--------------------------------

### Example JSON Response for Pokemon API

Source: https://elm.land/guide/rest-apis

Illustrates the structure of the JSON data returned by the `/api/v2/pokemon?limit=150` REST API endpoint, including total count, pagination links, and a list of individual pokemon entries with names and URLs.

```jsonc
{
    "count": 1154,
    "next": "http://localhost:5000/api/v2/pokemon?offset=150&limit=150",
    "previous": null,
    "results": [
        {
            "name": "bulbasaur",
            "url": "http://localhost:5000/api/v2/pokemon/1/"
        },
        {
            "name": "ivysaur",
            "url": "http://localhost:5000/api/v2/pokemon/2/"
        },
        // ( ... 148 more items )
    ]
}
```

--------------------------------

### Elm: Api.Me Module for User Data Fetching

Source: https://elm.land/guide/user-auth

Defines the `Api.Me` Elm module responsible for interacting with the `/api/me` endpoint. It includes a `User` type alias for deserializing user data, a JSON decoder for parsing the API response, and a `get` function that constructs and sends an HTTP GET request with the provided authentication token.

```elm
module Api.Me exposing (User, get)

import Effect exposing (Effect)
import Http
import Json.Decode

type alias User =
    { id : String
    , name : String
    , profileImageUrl : String
    , email : String
    }

decoder : Json.Decode.Decoder User
decoder =
    Json.Decode.map4 User
        (Json.Decode.field "id" Json.Decode.string)
        (Json.Decode.field "name" Json.Decode.string)
        (Json.Decode.field "profileImageUrl" Json.Decode.string)
        (Json.Decode.field "email" Json.Decode.string)

get :
    { onResponse : Result Http.Error User -> msg
    , token : String
    }
    -> Effect msg
get options =
    let
        url : String
        url =
            "http://localhost:5000/api/me?token=" ++ options.token

        cmd : Cmd msg
        cmd =
            Http.get
                { url = url
                , expect = Http.expectJson options.onResponse decoder
                }
    in
    Effect.sendCmd cmd
```

--------------------------------

### Example Pokemon API Response Structure

Source: https://elm.land/guide/rest-apis

Illustrates the expected JSON structure from the Pokemon API, showing the top-level fields like 'count', 'next', 'previous', and the 'results' array containing individual Pokemon objects with 'name' and 'url'.

```jsonc
{
    "count": 1154,
    "next": "http://localhost:5000/api/v2/pokemon?offset=150&limit=150",
    "previous": null,
    "results": [
        {
            "name": "bulbasaur",
            "url": "http://localhost:5000/api/v2/pokemon/1/"
        },
        {
            "name": "ivysaur",
            "url": "http://localhost:5000/api/v2/pokemon/2/"
        },
        // ( ... 148 more items )
    ]
}
```

--------------------------------

### Passing `route` to Elm `init` function in Layout

Source: https://elm.land/guide/user-auth

Illustrates how to pass the `route` value from the `layout` function to the `init` function in an Elm Land `Layouts.Sidebar` module. This provides the `init` function with access to current URL information, useful for initial state setup based on the URL.

```Elm
module Layouts.Sidebar exposing (Props, Model, Msg, layout)

-- ...

layout : Props -> Shared.Model -> Route () -> Layout Model Msg contentMsg
layout props shared route =
    Layout.new
        { init = init route
        , update = update
        , view = view props
        , subscriptions = subscriptions
        }

-- ...
```

--------------------------------

### Triggering JavaScript from Elm with Ports

Source: https://elm.land/guide/working-with-js

This section demonstrates how to set up an Elm application to send messages to JavaScript via ports, allowing Elm to trigger JavaScript functions like `window.alert`. It includes the Elm page setup, the JavaScript port subscription, and the expected console output.

```sh
elm-land add page /
```

```elm
module Pages.Home_ exposing (Model, Msg, page)

import Html.Events
-- ...

-- ...

type Msg
    = UserClickedButton

update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
    case msg of
        UserClickedButton ->
            ( model
            , Effect.openWindowDialog "Hello, from Elm!"
            )

-- ...

view : Model -> View Msg
view model =
    { title = "Homepage"
    , body =
        [
          Html.button
            [ Html.Events.onClick UserClickedButton
            ]
            [ Html.text "Say hello!" ]
        ]
    }
```

```console
OPEN_WINDOW_DIALOG Hello, from Elm!
```

```js
export const onReady = ({ app, env }) => {
  if (app.ports && app.ports.outgoing) {
    app.ports.outgoing.subscribe(({ tag, data }) => {
      switch (tag) {
        case 'OPEN_WINDOW_DIALOG':
          window.alert(data)
          return
        default:
          console.warn(`Unhandled outgoing port: "${tag}"`) 
          return
      }
    })
  }
}
```

--------------------------------

### API: GET /api/me - Successful Request

Source: https://elm.land/guide/user-auth

Demonstrates a successful API request to the `/api/me` endpoint, including a valid user token as a query parameter. The API responds with a 200 OK status code and the authenticated user's profile data, including ID, name, profile image URL, and email.

```APIDOC
GET http://localhost:5000/api/me?token=ryans-secret-token

Status code: 200

{
    "id": "1",
    "name": "Ryan Haskell-Glatz",
    "profileImageUrl": "https://avatars.githubusercontent.com/u/6187256?v=4",
    "email": "ryan@elm.land"
}
```

--------------------------------

### Create Nested Account Settings Page in Elm Land

Source: https://elm.land/guide/pages-and-routes

This snippet illustrates how to create a nested route, such as '/settings/account', which involves multiple slashes in the URL. It shows the `elm-land add page:view` command for nested routes, the resulting file path, and the generated Elm code structure. It also provides an example of deeply nested routes.

```sh
elm-land add page:view /settings/account
```

```txt
🌈  Elm Land added a new page at /settings/account
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
    You can edit your new page here:
    ./src/Pages/Settings/Account.elm
```

```elm
module Pages.Settings.Account exposing (page)

import Html exposing (..)
import View exposing (View)

page : View msg
page =
    { title = "Pages.Settings.Account"
    , body = [ text "/settings/account" ]
    }
```

```sh
elm-land add page:view /something/really/nested/like/super/nested
```

--------------------------------

### Elm: Rendering UI with the `view` function

Source: https://elm.land/guide/user-input

The `view` function takes the current `Model` and renders it into HTML that users can interact with. For this counter example, it creates two `<button>` elements to send `Msg` values (increment/decrement) and a `<div>` to display the current counter value. It demonstrates importing `Html.Events` for handling clicks and structuring the UI.

```elm
import Html.Events

-- ( imports always go at the top, under the "module" declaration )

view : Model -> View Msg
view model =
    { title = "Counter"
    , body =
        [ Html.button
            [ Html.Events.onClick UserClickedIncrement ]
            [ Html.text "+" ]
        , Html.div []
            [ Html.text (String.fromInt model.counter) ]
        , Html.button
            [ Html.Events.onClick UserClickedDecrement ]
            [ Html.text "-" ]
        ]
    }
```

--------------------------------

### Initialize Shared Model in Elm Land Application

Source: https://elm.land/guide/user-auth

This Elm snippet demonstrates how to update the `init` function in `src/Shared.elm` to correctly initialize the `Shared.Model`. It sets the `token` field to `Nothing` by default, ensuring the shared state is properly set up when the application starts.

```elm
module Shared exposing (..)

-- ...

init : Result Json.Decode.Error Flags -> Route () -> ( Model, Effect Msg )
init flagsResult route =
    ( { token = Nothing }
    , Effect.none
    )

-- ...
```

--------------------------------

### Elm Module for Fetching Pokemon Data via HTTP GET

Source: https://elm.land/guide/rest-apis

Implements the `Api.PokemonList` module, specifically the `getFirst150` function. This function constructs an `Http.get` request to the Pokemon API, specifying the URL and an `expectJson` decoder to process the incoming JSON response and pass it to the `onResponse` callback.

```elm
module Api.PokemonList exposing (getFirst150)

import Http

getFirst150 :
    { onResponse : Result Http.Error (List Pokemon) -> msg
    }
    -> Cmd msg
getFirst150 options =
    Http.get
        { url = "http://localhost:5000/api/v2/pokemon?limit=150"
        , expect = Http.expectJson options.onResponse decoder
        }
```

--------------------------------

### Build Elm Land app for production

Source: https://elm.land/guide/deploying

This command compiles, optimizes, and minifies your Elm Land application for production deployment. It generates a single-page application in the `dist` folder, ready for hosting.

```sh
elm-land build
```

--------------------------------

### Elm Land Project Structure with Static Folder

Source: https://elm.land/guide/pages-and-routes

Illustrates the recommended directory structure for an Elm Land project, showing the placement of the `static` folder alongside `src` and `elm-land.json` for serving static assets.

```txt
pages-and-routes/
├── README.md
├── elm.json
├── elm-land.json
├── src/
│   └── Pages/
│       └── ...
└── static/
    └── main.css
```

--------------------------------

### Initialize a new Elm Land project

Source: https://elm.land/guide/user-auth

Creates a new Elm Land project named 'user-auth' using the Elm Land CLI.

```sh
elm-land init user-auth
```

--------------------------------

### Initialize a new Elm Land project

Source: https://elm.land/guide/rest-apis

This command initializes a new Elm Land project with the specified name, creating the necessary directory structure and basic files. It's the first step to setting up a new Elm Land application.

```sh
elm-land init rest-apis
```

--------------------------------

### Netlify configuration for Elm Land SPA deployment

Source: https://elm.land/guide/deploying

This `netlify.toml` file configures Netlify for an Elm Land single-page application. It specifies the build command (`npx elm-land build`), the publish directory (`dist`), and sets up a redirect rule to ensure all paths resolve to `index.html` for proper SPA routing.

```toml
# 1️⃣ Tells Netlify how to build your app, and where the files are
[build]
  command = "npx elm-land build"
  publish = "dist"

# 2️⃣ Handles SPA redirects so all your pages work
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```

--------------------------------

### Vercel Configuration for Elm Land Deployment

Source: https://elm.land/guide/deploying

This `vercel.json` configuration file is recommended for deploying Elm Land projects on Vercel. It specifies the build command `npx elm-land build`, sets the output directory to `dist`, and includes a rewrite rule to ensure that all requests are routed to the root, which is crucial for handling client-side routing and 404s correctly.

```json
{
  "buildCommand": "npx elm-land build",
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}
```

--------------------------------

### Create a new Elm Land page

Source: https://elm.land/guide/user-auth

Uses the Elm Land CLI to create a new page at the '/sign-in' route.

```sh
elm-land add page /sign-in
```

--------------------------------

### Navigate into the project directory

Source: https://elm.land/guide/user-auth

Changes the current directory to the newly created 'user-auth' project directory.

```sh
cd user-auth
```

--------------------------------

### Create Static Sign-in Page in Elm Land

Source: https://elm.land/guide/pages-and-routes

This snippet demonstrates how to create a basic static page at the URL '/sign-in' using the `elm-land add page:view` command. It includes the command execution, its output indicating the file path, and the generated Elm code for the view-only page, showing how to set the browser tab title and render HTML body content.

```sh
elm-land add page:view /sign-in
```

```txt
🌈  Elm Land added a new page at /sign-in
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
    You can edit your new page here:
    ./src/Pages/SignIn.elm
```

```elm
module Pages.SignIn exposing (page)

import Html exposing (..)
import View exposing (View)

page : View msg
page =
    { title = "Pages.SignIn"
    , body = [ text "/sign-in" ]
    }
```

--------------------------------

### Implementing Catch-All Routes and Accessing the 'all_' Parameter in Elm Land

Source: https://elm.land/guide/pages-and-routes

Details the command to create a catch-all route page and shows the generated Elm code, highlighting the special 'all_' parameter which captures the dynamic segments as a list. Includes a visualization of how the 'all_' parameter's value changes based on the URL.

```sh
elm-land add page:view '/:user/:repo/tree/:branch/*'
```

```elm
module Pages.User_.Repo_.Tree.Branch_.ALL_ exposing (page)

import Html exposing (..)
import View exposing (View)

page :
    { user : String
    , repo : String
    , branch : String
    , all_ : List String
    }
    -> View msg
page params =
    { title = "Pages.User_.Repo_.Tree.Branch_.ALL_"
    , body = [ text "..." ]
    }
```

```txt
| URL | `route.params` |
| --- | --- |
| `/blog/hello` | `{ all_ = [ "hello" ] }` |
| `/blog/elm/land` | `{ all_ = [ "elm", "land" ] }` |
| `/blog/elm/land/ui` | `{ all_ = [ "elm", "land", "ui" ] }` |
```

--------------------------------

### Elm Decoder for Nested Sprite URL (Verbose Example)

Source: https://elm.land/guide/rest-apis

Illustrates an alternative, more verbose way to decode deeply nested JSON fields using multiple `Json.Decode.field` calls, contrasted with the more concise `Json.Decode.at` function.

```elm
-- The hard way!
(Json.Decode.field "sprites"
    (Json.Decode.field "other"
        (Json.Decode.field "official-artwork"
            (Json.Decode.field "front_default" Json.Decode.string)
        )
    )
)
```

--------------------------------

### Initialize a new Elm Land project

Source: https://elm.land/guide/working-with-js

This command creates a new Elm Land project directory with a specified name, setting up the basic project structure for development.

```sh
elm-land init working-with-js
```

--------------------------------

### Pokemon API Endpoint for Data Fetching

Source: https://elm.land/guide/rest-apis

This snippet provides the HTTP GET endpoint used to retrieve the first 150 Pokemon entries from a local API server. It serves as the target for the Elm application's API requests.

```txt
GET http://localhost:5000/api/v2/pokemon?limit=150
```

--------------------------------

### Successful Elm Land build command output

Source: https://elm.land/guide/deploying

This text snippet shows the expected output in the terminal after a successful `elm-land build` command. It confirms the build version and a success message.

```txt

🌈  Elm Land (v0.20.1) build was successful.
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
```

--------------------------------

### Update JavaScript Interop for User Flags

Source: https://elm.land/guide/user-auth

This snippet updates the `src/interop.js` file to send user data instead of just a token when the Elm application starts. The `flags` function is modified to parse user data from `localStorage` and provide it to the Elm application.

```javascript
export const flags = ({ env }) => {
  // Called before our Elm application starts
  return {
    user: JSON.parse(window.localStorage.user || null)
  }
}
```

--------------------------------

### Integrate Sidebar Component into Elm Land Homepage

Source: https://elm.land/guide/pages-and-routes

This Elm snippet demonstrates how to import and use the `Components.Sidebar` module within the `Pages.Home_` page. It sets the page's view by calling `Components.Sidebar.view` and passing a specific title ("Homepage") and content ("Hello, world!").

```Elm
module Pages.Home_ exposing (page)

import Components.Sidebar
import Html exposing (..)
import View exposing (View)

page : View msg
page =
    Components.Sidebar.view
        { title = "Homepage"
        , body = [ text "Hello, world!" ]
        }
```

--------------------------------

### API: GET /api/me - Unauthorized Request

Source: https://elm.land/guide/user-auth

Illustrates an attempt to fetch user data from the `/api/me` endpoint without providing a valid authentication token. The API responds with a 401 Unauthorized status code and an error message indicating that a token is required.

```APIDOC
GET http://localhost:5000/api/me

Status code: 401

{
   "message": "Token is required to access /api/me"
}
```

--------------------------------

### Elm: Complete Counter Application (`src/Pages/Counter.elm`)

Source: https://elm.land/guide/user-input

This snippet provides the full source code for the Elm counter application, combining the `module` declaration, `page` definition using `Page.sandbox`, `init` function for initial state, `update` logic for state transitions, and `view` function for UI rendering. It shows how all components fit together in a single Elm file to create a functional interactive application.

```elm
module Pages.Counter exposing (Model, Msg, page)

import Html exposing (Html)
import Html.Events
import Page exposing (Page)
import View exposing (View)

-- PAGE

page : Page Model Msg
page =
    Page.sandbox
        { init = init
        , update = update
        , view = view
        }

-- INIT

type alias Model =
    { counter : Int
    }

init : Model
init =
    { counter = 0
    }

-- UPDATE

type Msg
    = UserClickedIncrement
    | UserClickedDecrement

update : Msg -> Model -> Model
update msg model =
    case msg of
        UserClickedIncrement ->
            { model | counter = model.counter + 1 }

        UserClickedDecrement ->
            { model | counter = model.counter - 1 }

-- VIEW

view : Model -> View Msg
view model =
    { title = "Counter"
    , body =
        [ Html.button
            [ Html.Events.onClick UserClickedIncrement ]
            [ Html.text "+" ]
        , Html.div []
            [ Html.text (String.fromInt model.counter) ]
        , Html.button
            [ Html.Events.onClick UserClickedDecrement ]
            [ Html.text "-" ]
        ]
    }
```

--------------------------------

### Elm: Apply Layout to Pages using Page.withLayout

Source: https://elm.land/guide/user-auth

This Elm code demonstrates how to integrate a predefined layout, such as `Layouts.Sidebar`, into an application page using `Page.withLayout`. It shows how a page can opt-in to a specific layout, passing required properties like `title` and `user` to the layout function. This approach ensures consistent structural application across different pages.

```elm
module Pages.Home_ exposing (Model, Msg, page)

import Layouts
-- ...

page : Auth.User -> Shared.Model -> Route () -> Page Model Msg
page user shared route =
    Page.new
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }
        |> Page.withLayout (toLayout user)

toLayout : Auth.User -> Model -> Layouts.Layout Msg
toLayout user model =
    Layouts.Sidebar
        { title = "Dashboard"
        , user = user
        }

-- ...
```

--------------------------------

### Example of Error Log for Invalid Elm Flag Decoding

Source: https://elm.land/guide/working-with-js

This text snippet displays the browser console output when Elm's JSON decoder encounters an error, such as an unexpected `null` value for a `String` field, demonstrating robust error capture.

```txt
FLAGS: Err (Field "message" (Failure "Expecting a STRING" <internals>))
```

--------------------------------

### Inspecting Defined Routes with elm-land routes Command

Source: https://elm.land/guide/pages-and-routes

Explains how to use the `elm-land routes` command to inspect the routing structure of an Elm Land project, including the typical project file structure and the command's output showing all recognized routes.

```txt
pages-and-routes/
├── README.md
├── elm.json
├── elm-land.json
└── src/
    └── Pages/
        ├── Home_.elm
        ├── SignIn.elm
        ├── Settings/
        │   └── Account.elm
        ├── User_.elm
        └── User_/
            ├── Repo_.elm
            └── Repo_/
                └── Tree/
                    └── Branch_/
                        └── ALL_.elm
```

```sh
elm-land routes
```

```txt

  🌈  Elm Land (v0.20.1) found 6 pages in your application
    ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
  src/Pages/Home_.elm ........................... /
  src/Pages/SignIn.elm .......................... /sign-in
  src/Pages/Settings/Account.elm ................ /settings/account
  src/Pages/User_.elm ........................... /:user
  src/Pages/User_/Repo_.elm ..................... /:user/:repo
  src/Pages/User_/Repo_/Tree/Branch_/ALL_.elm ... /:user/:repo/tree/:branch/*
```

--------------------------------

### Basic Elm Land sandbox page structure

Source: https://elm.land/guide/user-input

This Elm code defines the initial structure of a `Page.sandbox` module, including `Model`, `Msg`, `init`, and `view` functions. It serves as a boilerplate for building interactive pages that adhere to the Elm Architecture, providing placeholders for state, messages, and UI rendering.

```elm
module Pages.Counter exposing (Model, Msg, page)

import Html exposing (Html)
import Page exposing (Page)
import View exposing (View)

-- PAGE

page : Page Model Msg
page =
    Page.sandbox
        { init = init
        , update = update
        , view = view
        }

-- INIT

type alias Model =
    {}

init : Model
init =
    {}

-- UPDATE

type Msg
    = NoOp

update : Msg -> Model -> Model
update msg model =
    case msg of
        NoOp ->
            model

-- VIEW

view : Model -> View Msg
view model =
    { title = "Counter"
    , body = [ Html.text "/counter" ]
    }
```

--------------------------------

### Define initial Elm Land interop.js structure

Source: https://elm.land/guide/working-with-js

This JavaScript file defines the entry points for Elm-JavaScript communication in Elm Land applications. It includes 'flags' for initial data and 'onReady' for post-startup interactions with Elm ports.

```js
// This is called BEFORE your Elm app starts up
//
// The value returned here will be passed as flags
// into your `Shared.init` function.
export const flags = ({ env }) => {

}

// This is called AFTER your Elm app starts up
//
// Here you can work with `app.ports` to send messages
// to your Elm application, or subscribe to incoming
// messages from Elm
export const onReady = ({ app, env }) => {

}
```

--------------------------------

### Navigate into the new project directory

Source: https://elm.land/guide/rest-apis

After initializing an Elm Land project, use this command to change the current directory to the newly created project folder. This is essential before running other project-specific commands.

```sh
cd rest-apis
```

--------------------------------

### Navigate into the new project directory

Source: https://elm.land/guide/working-with-js

Change the current directory to the newly created Elm Land project, preparing for further commands within the project context.

```sh
cd working-with-js
```

--------------------------------

### Define Pokemon API Module in Elm

Source: https://elm.land/guide/rest-apis

This Elm module defines the `Pokemon` type alias and functions for fetching Pokemon details from an API. It includes a `get` function to make HTTP requests and several JSON decoders to parse the API response into the `Pokemon` record type, handling nested fields like `spriteUrl` and `types`.

```Elm
module Api.PokemonDetail exposing (Pokemon, get)

import Http
import Json.Decode

type alias Pokemon =
    { name : String
    , pokedexId : Int
    , spriteUrl : String
    , types : List String
    }

get :
    { name : String
    , onResponse : Result Http.Error Pokemon -> msg
    }
    -> Cmd msg
get options =
    Http.get
        { url = "http://localhost:5000/api/v2/pokemon/" ++ options.name
        , expect = Http.expectJson options.onResponse decoder
        }

-- JSON DECODERS

decoder : Json.Decode.Decoder Pokemon
decoder =
    Json.Decode.map4 Pokemon
        nameFieldDecoder
        pokedexIdFieldDecoder
        spriteUrlFieldDecoder
        typesFieldDecoder

nameFieldDecoder : Json.Decode.Decoder String
nameFieldDecoder =
    Json.Decode.field "name" Json.Decode.string

pokedexIdFieldDecoder : Json.Decode.Decoder Int
pokedexIdFieldDecoder =
    Json.Decode.field "id" Json.Decode.int

spriteUrlFieldDecoder : Json.Decode.Decoder String
spriteUrlFieldDecoder =
    Json.Decode.at
        [ "sprites", "other", "official-artwork", "front_default" ]
        Json.Decode.string

typesFieldDecoder : Json.Decode.Decoder (List String)
typesFieldDecoder =
    Json.Decode.field "types" (Json.Decode.list pokemonTypeDecoder)

pokemonTypeDecoder : Json.Decode.Decoder String
pokemonTypeDecoder =
    Json.Decode.at [ "type", "name" ] Json.Decode.string
```

--------------------------------

### Create Dynamic User Page with URL Parameters in Elm Land

Source: https://elm.land/guide/pages-and-routes

This snippet demonstrates how to create a dynamic route, like '/:user', which can handle variable URL segments (e.g., '/ryan', '/duncan'). It shows the `elm-land add page:view` command for dynamic routes and the generated Elm code, highlighting how URL parameters are automatically passed as an input record to the page function. It also explains the significance of the trailing underscore in filenames for dynamic routes and how it affects parameter naming.

```sh
elm-land add page:view /:user
```

```elm
module Pages.User_ exposing (page)

import Html exposing (..)
import View exposing (View)

page : { user : String } -> View msg
page params =
    { title = "Pages.User_"
    , body = [ text ("/" ++ params.user) ]
    }
```

--------------------------------

### Add New Layout using elm-land CLI

Source: https://elm.land/guide/user-auth

Demonstrates how to use the `elm-land add layout` command to generate a new layout file, in this case, a 'Sidebar' layout.

```sh
elm-land add layout Sidebar
```

--------------------------------

### Elm: Implementing the `update` function for state changes

Source: https://elm.land/guide/user-input

The `update` function is responsible for returning a new, updated `Model` based on the `Msg` received from the `view` function. It accesses the current `Model` state to perform necessary calculations. This example uses Elm's record update syntax to modify the `counter` field. Elm automatically calls `update` when a `Msg` is sent, unlike manual calls in some JS frameworks.

```elm
update : Msg -> Model -> Model
update msg model =
    case msg of
        UserClickedIncrement ->
            { model | counter = model.counter + 1 }

        UserClickedDecrement ->
            { model | counter = model.counter - 1 }
```

--------------------------------

### Integrate Sidebar Component into Elm Land User Page with Parameters

Source: https://elm.land/guide/pages-and-routes

This Elm snippet demonstrates integrating the `Components.Sidebar` into the `Pages.User_` page, which accepts a `username` parameter. It imports the sidebar and uses its `view` function, dynamically generating the body content based on the provided `username`.

```Elm
module Pages.User_ exposing (page)

import Components.Sidebar
import Html exposing (..)
import View exposing (View)

page : { username : String } -> View msg
page params =
    Components.Sidebar.view
      { title = "Pages.User_"
      , body = [ text ("/" ++ params.user) ]
      }
```

--------------------------------

### Initial Elm Detail Page Structure for Pokemon

Source: https://elm.land/guide/rest-apis

This Elm code defines the foundational structure for the dynamic Pokemon detail page, located at `./src/Pokemon/Name_.elm`. It sets up the essential `Model`, `Msg`, `init`, `update`, `subscriptions`, and `view` functions, providing a basic template that initially displays a placeholder text for the dynamic route.

```elm
module Pages.Pokemon.Name_ exposing (Model, Msg, page)

import Html exposing (Html)
import Page exposing (Page)
import View exposing (View)

page : { name : String } -> Page Model Msg
page params =
    Page.element
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

-- INIT

type alias Model =
    {}

init : ( Model, Cmd Msg )
init =
    ( {}
    , Cmd.none
    )

-- UPDATE

type Msg
    = NoOp

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model
            , Cmd.none
            )

-- SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

-- VIEW

view : Model -> View Msg
view model =
    { title = "Pages.Pokemon.Name_"
    , body = [ Html.text "/pokemon/:name" ]
    }
```

--------------------------------

### Elm View: Initial API Failure Handling

Source: https://elm.land/guide/rest-apis

This Elm view snippet demonstrates the initial approach to handling an `Api.Failure` branch, displaying a generic 'Something went wrong...' message to the user when an HTTP request fails.

```elm
module Pages.Home_ exposing (Model, Msg, page)

-- ...

view : Model -> View Msg
view model =
    { title = "Pokemon"
    , body =
        [ -- ...
        , case model.pokemonData of
            Api.Loading ->
                Html.div [ class "has-text-centered p-6" ]
                    [ Html.text "Loading..." ]

            Api.Success pokemon ->
                viewPokemonList pokemon

            Api.Failure httpError ->
                Html.div [ class "has-text-centered p-6" ]
                    [ Html.text "Something went wrong..." ]
        ]
    }
```

--------------------------------

### Navigate into PokeAPI cache server directory

Source: https://elm.land/guide/rest-apis

Command to change the current directory into the newly cloned `pokeapi-cache-server` repository.

```sh
cd pokeapi-cache-server
```

--------------------------------

### Customize Elm Land Effect Module

Source: https://elm.land/guide/user-auth

This command is used to generate a customizable `Effect.elm` file in the `src` directory, allowing developers to define custom application-specific effects.

```Bash
elm-land customize effect
```

--------------------------------

### Create Dynamic Pokemon Detail Page with Elm Land CLI

Source: https://elm.land/guide/rest-apis

This command utilizes the Elm Land CLI to generate a new page that supports dynamic parameters. By specifying `/pokemon/:name`, it creates a page capable of handling requests for any Pokemon name, resulting in a file named `./src/Pokemon/Name_.elm`.

```sh
elm-land add page:element /pokemon/:name
```

--------------------------------

### Initial Elm Sidebar Layout Module

Source: https://elm.land/guide/user-auth

Shows the default generated code for a new Elm layout module, 'Layouts.Sidebar.elm', including its structure for Model, Msg, Props, init, update, subscriptions, and view functions.

```elm
module Layouts.Sidebar exposing (Model, Msg, Props, layout)

import Effect exposing (Effect)
import Html exposing (Html)
import Html.Attributes exposing (class)
import Layout exposing (Layout)
import Route exposing (Route)
import Shared
import View exposing (View)

type alias Props =
    {}

layout : Props -> Shared.Model -> Route () -> Layout Model Msg contentMsg
layout props shared route =
    Layout.new
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

-- MODEL

type alias Model =
    {}

init : () -> ( Model, Effect Msg )
init _ =
    ( {}
    , Effect.none
    )

-- UPDATE

type Msg
    = ReplaceMe

update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
    case msg of
        ReplaceMe ->
            ( model
            , Effect.none
            )

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

-- VIEW

view :
    { toContentMsg : Msg -> contentMsg
    , content : View contentMsg
    , model : Model
    }
    -> View contentMsg
view { toContentMsg, model, content } =
    { title = content.title
    , body =
        [ Html.text "Sidebar"
        , Html.div [ class "page" ] content.body
        ]
    }
```

--------------------------------

### Initial Elm Effect Module Structure

Source: https://elm.land/guide/user-auth

Shows the default structure of the `src/Effect.elm` file generated by `elm-land customize effect`, exposing core effect functions.

```Elm
module Effect exposing
    ( Effect
    , none, batch
    , sendCmd, sendMsg
    , pushRoute, replaceRoute, loadExternalUrl
    , map, toCmd
    )

-- ...
```

--------------------------------

### Elm Land Home Page Module (Page.element)

Source: https://elm.land/guide/rest-apis

This Elm code defines the `Pages.Home_` module, demonstrating the structure of a `Page.element`. It includes the `Model`, `Msg`, `init`, `update`, `subscriptions`, and `view` functions, highlighting how `Cmd Msg` can be returned from `init` and `update` for side effects like HTTP requests.

```elm
module Pages.Home_ exposing (Model, Msg, page)

import Html exposing (Html)
import Page exposing (Page)
import View exposing (View)

-- PAGE

page : Page Model Msg
page =
    Page.element
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

-- INIT

type alias Model =
    {}

init : ( Model, Cmd Msg )
init =
    ( {}
    , Cmd.none
    )

-- UPDATE

type Msg
    = NoOp

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model
            , Cmd.none
            )

-- SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

-- VIEW

view : Model -> View Msg
view model =
    { title = "Pages.Home_"
    , body = [ Html.text "/" ]
    }
```

--------------------------------

### Clone PokeAPI cache server repository

Source: https://elm.land/guide/rest-apis

Command to clone the `pokeapi-cache-server` Node.js application from GitHub, which helps cache API requests to comply with fair use policies.

```sh
git clone git@github.com:ryannhg/pokeapi-cache-server
```

--------------------------------

### Import HTML modules in Elm

Source: https://elm.land/guide/user-auth

Imports necessary modules from the `elm/html` package into `src/Pages/SignIn.elm` to handle user interaction and set HTML attributes for the sign-in form.

```elm
import Html exposing (Html)
import Html.Attributes as Attr
import Html.Events
```

--------------------------------

### JavaScript: Handling Elm Local Storage Ports

Source: https://elm.land/guide/user-auth

This JavaScript snippet, intended for `src/interop.js`, sets up the client-side logic to receive messages from Elm's `sendToLocalStorage` port. The `onReady` function subscribes to this port, parsing the incoming `key` and `value` to store them in the browser's `localStorage` API. This enables persistence of data like user tokens.

```javascript
export const flags = ({ env }) => {
  // Called before our Elm application starts
  return {}
}

export const onReady = ({ env, app }) => {
  // Called after our Elm application starts
  if (app.ports && app.ports.sendToLocalStorage) {
    app.ports.sendToLocalStorage.subscribe(({ key, value }) => {
      window.localStorage[key] = JSON.stringify(value)
    })
  }
}
```

--------------------------------

### Elm `init` function with `Cmd Msg` return type

Source: https://elm.land/guide/rest-apis

Demonstrates the `init` function returning a tuple `(Model, Cmd Msg)`. `Cmd Msg` is used for side-effects, with `Cmd.none` indicating no commands are run.

```elm
init : ( Model, Cmd Msg )
init =
    ( {}
    , Cmd.none
    )
```

--------------------------------

### Elm Land: Initializing Form Model and State

Source: https://elm.land/guide/user-auth

Defines the `Model` type alias for a sign-in form, including fields for email, password, and submission status. The `init` function sets the initial state of these fields and introduces the `Effect Msg` type for handling side-effects.

```elm
-- INIT

type alias Model =
    { email : String
    , password : String
    , isSubmittingForm : Bool
    }

init : () -> ( Model, Effect Msg )
init () =
    ( { email = ""
      , password = ""
      , isSubmittingForm = False
      }
    , Effect.none
    )
```

--------------------------------

### Navigate into a project directory

Source: https://elm.land/guide/user-input

This command changes the current directory to the newly created Elm Land project. It's a standard shell command used to move into a specific folder before running other project-related commands.

```sh
cd user-input
```

--------------------------------

### Configure Bulma CSS in elm-land.json

Source: https://elm.land/guide/user-auth

Adds the Bulma CSS framework stylesheet to the Elm Land project's HTML configuration in `elm-land.json` to style the sign-in form.

```json
{
  "app": {
    "env": [],
    "html": {
      ...
      "link": [
        { "rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" }
      ],
      ...
    }
  }
}
```

--------------------------------

### Elm: Integrating Local Storage Effects into Shared Update

Source: https://elm.land/guide/user-auth

This Elm code demonstrates how to integrate the previously defined local storage effects into the `Shared.update` function. Upon a `SignIn` message, it uses `Effect.batch` to redirect the user and save their token via `Effect.saveUser`. For a `SignOut` message, it clears the token using `Effect.clearUser`, ensuring tokens are managed correctly based on user actions.

```elm
module Shared exposing (..)

-- ...

update : Route () -> Msg -> Model -> ( Model, Effect Msg )
update route msg model =
    case msg of
        Shared.Msg.SignIn { token } ->
            ( { model | token = Just token }
            , Effect.batch
                [ Effect.pushRoute
                    { path = Route.Path.Home_
                    , query = Dict.empty
                    , hash = Nothing
                    }
                , Effect.saveUser token
                ]
            )

        Shared.Msg.SignOut ->
            ( { model | token = Nothing }
            , Effect.clearUser
            )
```

--------------------------------

### Load User Token from Local Storage into Elm Application

Source: https://elm.land/guide/user-auth

These snippets demonstrate how to load a user token from browser local storage into an Elm application during startup. The JavaScript part reads the token and passes it as flags, while the Elm part defines the flag structure, decodes the incoming token, and initializes the application model with it.

```js
export const flags = ({ env }) => {
  // Called before our Elm application starts
  return {
    token: JSON.parse(window.localStorage.token || null)
  }
}

// ...
```

```elm
module Shared exposing (..)

-- ...

type alias Flags =
    { token : Maybe String
    }

decoder : Json.Decode.Decoder Flags
decoder =
    Json.Decode.map Flags
        (Json.Decode.field "token" (Json.Decode.maybe Json.Decode.string))

init : Result Json.Decode.Error Flags -> Route () -> ( Model, Effect Msg )
init flagsResult route =
    let
        flags : Flags
        flags =
            flagsResult
                |> Result.withDefault { token = Nothing }
    in
    ( { token = flags.token }
    , Effect.none
    )

-- ...
```
Tokens:
Raw