Elm mini SPA (step 6)
What?
This is the seventh step on creating a simple Elm web application using the Single-page Application architecture.
At this step we will add a module called Route.elm
for better using multiple
pages path routes.
You can use several different kind of routes and even create your own manually but we are here presenting a magical router developed by Simon Lydell at elm-app-url
For using elm-app-url
you may install it with the command:
elm install lydell/elm-app-url
Then move all the routes created at Main.elm
to a new module called
Route.elm
and add helper functions to locate the routes and use them from the
Main.elm
module.
That's it, now you have a solid router to handle your Elm web application, of course with just two pages there is no need for an explicit router but for real massive multipages applications a router is a life saver.
More info about elm-app-url
may be found at Elm Radio Episode 077: elm-app-url with Simon Lydell.
Congratulations !! ... You have created an Elm SPA application, rather simple but it can work as a fundation real Elm web multipages applications like the ones we use at Talenteca using Elm and elm-ui, just please remember to used only as a reference and adapt it to your own projects requirements.
The full steps are:
- Step0: Create a simple page applications (code)
- Step1: Upgrade to a full navigation application (code)
- Step2: Add an extra page (code)
- Step3: Support for global shared data (code)
- Step4: Make the illusion real (code)
- Step5: Making the web server happy (code)
- Step6: Adding a magical router (code)
IMPORTANT: This is only one way to provide SPA support for Elm, you do not need to implement new projects following exactly this code, please use it only as a reference and at the step level you may require.
How?
We will cover a sample step by step starting with a simple page with a counter until we have a multiple page Elm web application with multiple local and global counters.
For running this step code just execute the command:
cd elm-mini-spa-step6
elm-live -- src/Main.elm
And open your favorite browser pointing to http://localhost:8080
Where?
The source code is at https://github.com/csaltos/elm-mini-spa and the full tutorial at https://www.udemy.com/course/elm-the-complete-guide/.
Who?
This sample code is created with love by Carlos Saltos, please considere to buy me a coffee.