Project structure for spa applications

Learn
1

Hi guys, hope that everyone is OK:D

I’m newbie in terms of elm project structure, I have found the Richard → elm spa real world. I really liked how the project was structure, but one thing is not clear for me, so I hope that someone can help me in this point.

I have my pages folder that will have my pages, for every page.elm I will have view, update, model and init, in some cases I will have ports and sub too.

My doubt is, how can I pass the init of every page to my init in the Main.elm?

PS: one detail is that my spa will have routes too, so I think that the init will be call in somewhere between route and init maybe?

Can someone give me an example please on how can I implement this method in my project?

2

You might want to check out https://www.elm-spa.dev/ as well.

As for when your page’s init function gets used it gets used when you navigate to that page. For example if you navigate to RouteUsers then you’d use Page.Users.init in whatever code is handling setting the page. This will mostly be in your update function, but you’ll also need to use 1 of your page’s init functions in your main init, and which one will be based off of the initial route the user is navigating too.

3

Here is another example you can look at elm-example-app/Main.elm at master · sporto/elm-example-app · GitHub

You would have a function like loadCurrentPage which calls init based on the route change.
This func is from onUrlChange on Browser.application.

Some url changes shouldn’t necessarily call init e.g. adding a query string. In this case you will need this loadCurrentPage to make a distinction. If the new route is different than the current route then call init on that page, otherwise can update passing the info of the query change.

2 Likes
4

Thank you @wolfadex for your explanation, I think that I’m starting to understand how it works:D. I will take a look at the link too. thank you very much.

5

Thank you @Sebastian I was looking for something like that project. Like view and update I will need to pass the page init too, this loadcurrentpage helper function is very clear in how I can do what I need :D.

As I’m new with elm, I’m preferring to do my projects using pure elm than using packages. I think that it can’t be good to my learning process.

Thank you very much for the tips and for sharing that repo:D

6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.