elm-spa/docs/public/content/examples.md
2021-05-02 10:42:12 -05:00

2.8 KiB

Examples

Prefer to learn by example? Wonderful! The source code for all of the examples on this site can be found in the GitHub repo's examples folder.

Hello, world!

Get an introduction to the framework with a simple app.

Example 1 screenshot

Pages

Learn how pages and URL routing work together.

Example 2 screenshot

Local storage

Use ports and local storage to persist data on refresh.

Example 3 screenshot

User authentication

Explore the elm-spa's user authentication API.

Example 4 screenshot

Real world examples

elm-css patterns

Author: @bigardone

elm-css patterns screenshot

Source code: GitHub

RealWorld Conduit App

Author: @ryannhg

Implements the RealWorld app, inspired by Richard Feldman's "elm-spa-example" project.

Realworld app screenshot

Source code: GitHub

This website

Author: @ryannhg

The website you are looking at right now was built with elm-spa. Mindbending, right?

Realworld app screenshot

Source code: GitHub

More examples

There are more examples available on the official repo:

Working with NPM 🔗

Use Vite instead of the default elm-spa server command. This gives you access to NPM, reading environment variables, and fancier JS ecosystem stuff.

Testing 🔗

Use elm-test and elm-program-test to write unit and end-to-end tests for your single page application.

Using Elm UI 🔗

Use the wonderful elm-ui package to create web UIs without the need for HTML or CSS. This example can also be applied to elm-css or any other custom UI of your choice.