elm-spa-boiler-plate

A SPA boiler plate for elm projects

Stack

Welcome to the ET Stack

Elm - for sweet 🍬 functional code
Tachyons - for speedy 💨 modular styling

Structure

src/ -- contains elm code
src/Routes/ -- contains Html Msgs for your pages && elements
public/ -- contains built code, and an index.html file

Commands

npm run dev -- will start watching your elm project, and run a local dev server

npm run build -- will build your elm project as a js file, ready to serve as a static site

Routing

Routing is done via a #url to avoid reloading the page and loosing model's state. There are workarounds for this, but this a simple solution that requires minimal code (check resources below for alternatives). The router works by using the Navigation package which gives us access to the url. Our app checks the current url address, updates this route in the modal, then renders the page according to the modal.route.

All routing takes place in the State.elm & View.elm files:

• getRoute in Update.elm acts as a virtual router, which gets the current url and sets it in model
• the case statement in View.elm acts as a handler which serves the correct Html Msg

To add a new route you need to:

1. Add a your route as a msg type in Route in Type.elm
2. Create and export a Html Msg for the new page and place it in a separate file in Routes/
3. Add a case for the route under getRoute in State.elm
4. Serve the file by adding a case for the importedHtml Msg in view

Multiplicity

To duplicate this repo for your own use follow these gitHub instructions. And don't forget to ⭐ 🌟 ⭐ to say thanks!

Resources

This is a basic way of routing a SPA using this tutorial

Further reading on best practises and limitations can be found here: Choosing Elm SPA architecture