Frontend, Data, Navigation, And APIs

In our last section, we said our frontend will live in Pages.Date, and it will have a field called date of type String:

#[realm_page(id = "Pages.Date")]
struct Page {
    date: String,

So lets create a file named Date.elm in frontend/Pages folder, and create Config to mirror the Page struct.

module Pages.Date exposing (..)

type alias Config =
    { date: String

In upcoming version of realm, Config would be auto created by realm_page macro in rust, for now we have to manually create the type and its decoder:

module Pages.Date exposing (..)

impost Json.Decode as JD

type alias Config =
    { date: String

config : JD.Decoder Config
config = Config
        (JD.field "date" JD.string)

In realm code it is convention to always alias Json.Decode module as JD.

A realm app, is nothing but an Elm app, so one of the first things we do is write our Model.

In our app so far, we are simply going to show the date sent by server, so we have to store it in our Model.

We can either store the entire Config, or just the date, most times its clean to simply store Config on model, so that is what we are going to do here:

module Pages.Date exposing (..)

impost Json.Decode as JD

type alias Config =
    { date: String

type alias Model = 
    { config: Config

init method

In realm apps, the signature of init method is:

init : Realm.In -> Config -> ( Model, Cmd (Realm.Msg Msg) )

Realm has a type Realm.In, with gets passed to our init/document/update/subscription methods.

init also gets our Config object. It has to return our Model that just created, and a Command.

In realm, all messages must be of kind Realm.Msg msg.

We have not yet defined out message, so lets define it and init:

module Pages.Date exposing (..)

import Json.Decode as JD
import Realm as R

// snipping code so far

type Msg =

init : R.In -> Config -> ( Model, Cmd (R.Msg Msg) )
init _ c =
    ( { config = c }, Cmd.none )

As convention, we import Realm as R.

Our init is not using the first parameter R.In, so we are binding it to _.

We are storing the passed config and creating our Model ({ config = c }), and since we do not want to do anything on init, we are returning Cmd.none.

update method

update method Realm applications have the following signature:

update : R.In -> Msg -> Model -> ( Model, Cmd (R.Msg Msg) )

In our app we do not have any functionality, so our update is simply going to ignore everything and return current model.

update : R.In -> Msg -> Model -> ( Model, Cmd (R.Msg Msg) )
update _ _ m =
    (m, Cmd.none)

document method

This is going to the real meat of our application. The job of document method is to return the html document.

In realm we use elm-ui, in the document mode, which defines document as a type that keep track of title of the page, and the html of the page.

Title appears in the browser tab/title bar, and html is the entire content of the body. elm-ui empties the entire document and replaces it with what is returned by this function.

Table Of Content

What is Realm?

A Bit On Motivation

Routing is Hard

What does Realm do?

Backend Data And Type Safety


Quick Start Realm Tutorial

In Depth Tutorial (not ready)

Hello Rust
Hello Elm
Hello Static Files
Hello Server Side Rendering
Pre-Commit Hooks

Routing, Request And Response

Frontend, Data, Navigation, And APIs

How To Guides

File Upload

Backend: S3 File Upload
Authenticated File Serving
Frontend: Uploading Files From Elm

How to use storybook?

How to implement “loading..”?









Environment Variables

Internals - Only for Realm Developers, not Users

“Realm DATA”
iFrame Controller
Shutdown Routine
Testing Internals

Change Log

Get Realm Starter Working

Transparent Offline Feature

How to make http requests in Realm?


Tutorial: ToDo App

Realm Testing

Enhance Realm Starter

Double Load Issue

Deploy To Heroku Button

End failure

Realm-Starter Github Template

Proposal: Tracker And Visit

Proposal: Activity Store

Proposal: Bundling

Proposal: Retry On Network Error

Storybook: Editable JSON

Storybook: Notes

Storybook: Reference



Change Log

How to Publish


Code Snippets

Skip rustfmt For Some Section

Close Modal Dialog When Clicked Outside

Ignoring Lints In Python

Ignoring Lints (clippy and rustc warnings) In Rust

Handle DateTime in Rust & Elm

Handle CiText value read in Rust

Transport Enum Type to and fro Rust/Elm through JSON