Live Server

The “run” command of CLI runs the live-server, as opposed to the “gen” command which generates the static site one off. The live-server is a simple HTTP server that serves the Ema site “on the fly” (without doing O(n) static-site generation). Furthermore, changes to your Model type (via Dynamic) will automatically Hot Reload the browser clients to display the new HTML as rendered using the new model value.

It is not unusual to write Ema apps purely for the live server UX, and disable static site generation entirely (by nullifying routeUniverse in IsRoute).

Links to this page
  • Hot Reload

    The Ema dev server uses websockets to keep a bi-directional connection open between the web browser and the Live Server. When you click on a link or when something changes in the backend, they are communicated via this connection. In a statically generated site, however, no such activity happens - and a link click behaves like a normal link, in that the browser makes a full HTTP request to the linked page.

    Hot Reloading is a feature of Ema’s Live Server wherein any changes to your Haskell source or data files (such as Markdown files or HTML templates) propagate instantly to the web browser without requiring any manual intervention like a full browser refresh. In practice, this is a such a delightful feature to work with. Imagine changing CSS style of an element, and see it reflect on your site in a split second.

  • Hello World
    Running the resultant executable without arguments runs the Live Server, whereas running it with the gen subcommand will generate the static site (see CLI).
  • Getting Started

    Step 3 starts the Ema Live Server displaying a simple website. Try modifying the HTML DSL in the Haskell source ./src/Main.hs, and observe how the browser-view updates instantly.

  • Ema

    Ema is a next-gen library for building jamstack-style static sites in Haskell. Ema sites are change-aware; in addition to good ol’ static site generation, Ema provides a live server supporting fast hot-reload in the browser, on code or data change.

  • Dynamic Model

    In Add a Model, we modified our mood tracker to display the moods from a CSV file. Here, we improve it so that any user modifications to the data/moods.csv file will hot reload the Live Server view of our app in the same manner as Emanote does.

  • Composing Ema apps

    Ema.Route.Lib.Extra.StaticRoute provides a StaticRoute site that can monitor a directory and allow referring to the files in it. The Model type for this sub-route keeps track of last-added time, which gets appended to the URL when running in Live Server, which in turn has the effect of “refreshing” the target content (eg: image) when the underlying files change.

  • CLI
    gen subcommand: Generate the static site, instead of starting up the Live Server
    run subcommand (or, no subcommand specified): Run the Live Server.
  • Asset

    The AssetStatic fp asset is copied as-is from the source directory to the destination directory. In Live Server the file is served directly from the given path. See Ema.Route.Lib.Extra.StaticRoute for example.

    Live Server specifically looks at the Asset Generated . Html asset and Hot Reloads the browser on its change.