Elm-spa: single page apps made easy

hey folks! :wave:

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! :tada:

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! :heart:

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! :partying_face:
Ryan

42 Likes

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

1 Like

Really cool! :tada:

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.

1 Like

yea ive been noticing firefox behaving strangely :sweat_smile:

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

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!

7 Likes

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

1 Like

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 :smile:

2 Likes

@lydell and @ChrisWellsWood

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

4 Likes

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

@jklina it’s up for me right now

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

2 Likes

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.

1 Like

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

Fixed on the latest site:

1 Like

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

2 Likes

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.

2 Likes

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

1 Like

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

I’m glad you enjoy using elm-spa!

2 Likes

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