Elm-spa: single page apps made easy

[RyanNHG]

hey folks!

A few months ago, I started working on a project to make building single page web applications with Elm a bit easier.

My goal was to prevent the need to manually write boilerplate when creating new pages and routes in your app!

Today, I’d like to officially share elm-spa.dev with the Elm community!

The site was built with elm-spa, and the guide walks you through how to build the website from start to finish!

I encourage folks to check it out, and I’m super excited to hear about your experience!

Special shoutout to @ianmackenzie and @dillonkearns for their awesome suggestions and ideas, and to all the amazing people who encouraged me to keep improving on the initial design!

wanna try it out?

It’s just three commands to get started:

npx elm-spa init hello
cd hello
npm start

Thanks again for all the support! It’s incredible to be a part of such a wonderful community.

Happy New Year!
Ryan

[ganlhi]

Hurray! You’re back with good news!
Congratulations for the release!

[lydell]

Really cool!

The page transitions don’t seem to work in Firefox when going to a page you haven’t visited before. The whole page sort of flings to the left before then new content flashes in. Chrome works better. Also, when using a computer with always-visible scrollbars, the page jumps a little horizontally during the transition due to the scrollbar temporarily disappearing.

[RyanNHG]

yea ive been noticing firefox behaving strangely

im sure theres something wrong with how im using elm-ui. its like the styles are disappearing!

[ChrisWellsWood]

It looks like you’re using Font.external in Elm-UI. It causes that flash on page load according to the docs: https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Font#external

elm-spa is great by the way, I’ve been using it since your initial post. I ignored your advice and converted my current project use it, which was a little painful when I had to upgrade from v1->v3, but it was still totally worth it!

[danbruder]

Thank you! THIS IS AWESOME!

Is there currently a way to use query parameters in URLs?

i.e. https://some-store/orders?start_date=X&end_date=Y&user_id=1

[RyanNHG]

Hey @danbruder

You bet! Each page has access to something called PageContext:
https://package.elm-lang.org/packages/ryannhg/elm-spa/latest/Spa-Types#PageContext

Right now, that context allows you to access the global model, the current route, and the query parameters.

I have been considering just providing the Url itself, but for now, you get a Dict String String, which might be a simpler thing to deal with

[RyanNHG]

@lydell and @ChrisWellsWood

The Firefox bug is fixed, thanks for the pro tip! ‍♂

use typeface to prevent flashing between transitions

[jklina]

It looks like the website is down, but totally interested in the project!

[wolfadex]

@jklina it’s up for me right now

[jklina]

False alarm, I’m rerouting dev domains locally for project hosting, heh.

[Namek]

The website behaves jumpy on mobile Chrome, Android. Especially when I scroll (swipe?) slowly. It’s like fighting my finger.

I like the general idea because it may be a better way to introduce Elm in company as a productive tool. However I’d prefer text than videos in the docs if I have to choose.

[RyanNHG]

I tried to use smooth scrolling, but it causes a weird experience on mobile.

Fixed on the latest site:

fix jumpy scroll behavior

[mattgumbley]

Hi Ryan! Thank you for elm-spa, I’m currently not working on my first elm project (which was a spa) due to time constraints, and from failing to correctly pull together all the bits from the docs/books I’d been reading on how to build one. Your project looks great, just what’s needed to help me restart with a decent working foundation. Regards, Matt

[Douglas_H_Bradshaw]

I’ve been playing with elm-spa for the past week or so as a new elm user. It’s really convenient and fun. Good job documenting it.

[vitaminssnoopy]

Congratulations on and thanks for the release. I found the video documentation combined with written works well …

[RyanNHG]

So encouraging to hear folks new to Elm are having a good time

I’m glad you enjoy using elm-spa!