elm-pages

elm-pages

elm-pages is a framework for building an Elm single-page app that is able to seamlessly interface with data from an Elm Backend. elm-pages is a hybrid framework, allowing you to define Routes that are either server-rendered (for more dynamic content with user-specific or request-specific data) or pre-rendered at build-time (for generating static HTML files that are hosted through a CDN). You can mix and match server-rendered and pre-rendered routes in your app.

elm-pages also has a command for running pure Elm scripts with a single command. See the elm-pages Scripts docs page.

What's new in 12.2

• Tui — build interactive terminal apps as elm-pages scripts. TEA-style init/update/view that renders styled text to the terminal and responds to keyboard, mouse, paste, resize, and time events. Tui.programOrScript lets the same script behave interactively in a TTY and as a plain BackendTask under CI or when its output is piped.
• Test.PagesProgram — end-to-end tests for elm-pages routes. Drive the real framework runtime through form submissions, optimistic UI, concurrent fetchers, redirects, session cookies, and error pages with simulated HTTP and custom ports. Deterministic, in-process, no browser. Inspired by elm-program-test.
• Test.Tui — pure Elm tests for TUI programs. Simulate keypresses and mouse events, resolve pending BackendTasks with the Test.BackendTask simulators, and assert on screen output.
• Visual test runner — elm-pages dev serves page tests in the browser at /_tests, and elm-pages test --visual steps through TUI tests in the terminal. Run tests headlessly with elm-pages test.

See examples/smoothies/tests/ and examples/todos/tests/ for route tests, and examples/end-to-end/script/tests/TuiStarsTests.elm for a TUI test.

Getting Started Resources

• elm-pages Docs Site
• elm-pages site showcase
• elm-pages Elm API Docs
• Quick start repo (live site hosted here)
• Introducing elm-pages blog post
• examples folder (includes https://elm-pages.com site source) Use git clone --recurse-submodules https://github.com/dillonkearns/elm-pages.git so that there aren't missing files when you try to build the examples.

Compatibility Key

You will see an error if the NPM and Elm package do not have a matching Compatibility Key. Usually it's best to upgrade to the latest version of both the Elm and NPM