Here is what we already see:
- General Aspects between Elm and JS
- Creating HTML elements and using libraries in Elm
- Understanding the Elm Architecture
- How to get data from APIs using Elm
- What are Subscriptions and Commands in Elm
There is a really good Elm SPA Example, which is probably the most complete Elm SPA on the web. But I feel, this is too hard for someone who is starting in Elm.
My idea is to have a few posts walking through building an Elm SPA.
Our SPA will be called Learn-Programming.today. This is an idea we have for gathering programming tutorials, and the front-end will be written in Elm.
We will start our project with Create Elm App. If you use React, and you know Create React App, this is very similar. It produces a boilerplate Elm project to be used as a starting point. This helps us get started quickly.
I suppose you already have installed create-elm-app. It’s an npm package, so it’s easy to install.
Let’s create our project and see the file structure it creates:
We will divide our project into a few modules: View, Model, Update and App. To get an overview of how the code can be structured, you can check the Elm Firestorm Client.
Let’s start with our App.
Create Elm App gave us a
Main.elmfile. Let’s tweak that to have a View, Msg, and Model file.
As you saw, an Elm App has view, init, update and subscriptions. We will not worry about subscriptions for the moment.
Here we have our update function and we have our init function.
Our model will have an attribute called
history. It will be a list of
Navigation.Location. We will just add in the list the elements of our history. In the future we will parse this location and show the appropriate page.
Our Messages are actions. We have two actions:
NoOprepresents nothing, any action.
UrlChangerepresents the act of changing our Url. It will fire the update function and push the location into our model.
Our view takes in our model and produces the HTML to render the page. Here we are going to show the elements inside our models.
To do that, we can compile
To deploy that, it just uses
now index.htmland it’s done! You can do this if you’re starting with Elm and would like to show to someone or just put in the internet. It’s really easy!
Today, we saw how to have a better structure of our project and how to code with Elm using different files. In the next posts, we will keep doing this project and build our SPA.