# Elm-spa: single page apps made easy

**URL:** <https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950>\
**Category:** Show and Tell\
**Created:** [January 8, 2020, 1:36pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950 "2020-01-08T13:36:20Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![RyanNHG](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ryannhg/32/5162_2.png) [@RyanNHG](https://discourse.elm-lang.org/u/RyanNHG)\
**Post date:** [January 8, 2020, 1:36pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/1 "2020-01-08T13:36:20Z")

</div>

## 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](https://elm-spa.dev) with the Elm community!** 🎉

 ![elm-spa homepage](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/2/216ae9f4116b4ed3a3cf7a5911bfc1070d28a883.jpeg)

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:

```auto
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**

---

<div class="post-metadata">

**Author:** ![ganlhi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ganlhi/32/2669_2.png) [@ganlhi](https://discourse.elm-lang.org/u/ganlhi)\
**Post date:** [January 8, 2020, 4:05pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/2 "2020-01-08T16:05:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [January 8, 2020, 4:50pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/3 "2020-01-08T16:50:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RyanNHG](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ryannhg/32/5162_2.png) [@RyanNHG](https://discourse.elm-lang.org/u/RyanNHG)\
**Post date:** [January 8, 2020, 5:09pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/4 "2020-01-08T17:09:29Z")

</div>

yea ive been noticing firefox behaving strangely 😅

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

---

<div class="post-metadata">

**Author:** ![ChrisWellsWood](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/chriswellswood/32/5293_2.png) [@ChrisWellsWood](https://discourse.elm-lang.org/u/ChrisWellsWood)\
**Post date:** [January 8, 2020, 6:32pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/5 "2020-01-08T18:32:25Z")

</div>

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](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!

---

<div class="post-metadata">

**Author:** ![danbruder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/danbruder/32/585_2.png) [@danbruder](https://discourse.elm-lang.org/u/danbruder)\
**Post date:** [January 8, 2020, 8:07pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/6 "2020-01-08T20:07:36Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![RyanNHG](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ryannhg/32/5162_2.png) [@RyanNHG](https://discourse.elm-lang.org/u/RyanNHG)\
**Post date:** [January 8, 2020, 8:24pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/7 "2020-01-08T20:24:20Z")

</div>

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](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 😄

---

<div class="post-metadata">

**Author:** ![RyanNHG](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ryannhg/32/5162_2.png) [@RyanNHG](https://discourse.elm-lang.org/u/RyanNHG)\
**Post date:** [January 8, 2020, 8:31pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/8 "2020-01-08T20:31:33Z")

</div>

@lydell and @ChrisWellsWood

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

> <https://github.com/ryannhg/elm-spa-dev/commit/10ce018d3d3f34f07a11f672fa4ae8011d95c340>

---

<div class="post-metadata">

**Author:** ![jklina](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jklina/32/2759_2.png) [@jklina](https://discourse.elm-lang.org/u/jklina)\
**Post date:** [January 11, 2020, 3:07am UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/9 "2020-01-11T03:07:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [January 11, 2020, 3:09am UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/10 "2020-01-11T03:09:46Z")

</div>

@jklina it’s up for me right now

---

<div class="post-metadata">

**Author:** ![jklina](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jklina/32/2759_2.png) [@jklina](https://discourse.elm-lang.org/u/jklina)\
**Post date:** [January 11, 2020, 3:11am UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/11 "2020-01-11T03:11:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Namek](https://avatars.discourse-cdn.com/v4/letter/n/6a8cbe/32.png) [@Namek](https://discourse.elm-lang.org/u/Namek)\
**Post date:** [January 12, 2020, 9:28am UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/12 "2020-01-12T09:28:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RyanNHG](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ryannhg/32/5162_2.png) [@RyanNHG](https://discourse.elm-lang.org/u/RyanNHG)\
**Post date:** [January 12, 2020, 5:55pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/13 "2020-01-12T17:55:11Z")

</div>

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

Fixed on the latest site:

> <https://github.com/ryannhg/elm-spa-dev/commit/f56a5f4efe0e43f063552195fb547d6846843b74>

---

<div class="post-metadata">

**Author:** ![mattgumbley](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mattgumbley/32/1777_2.png) [@mattgumbley](https://discourse.elm-lang.org/u/mattgumbley)\
**Post date:** [January 14, 2020, 9:29am UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/14 "2020-01-14T09:29:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Douglas\_H\_Bradshaw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/douglas_h_bradshaw/32/2883_2.png) [@Douglas\_H\_Bradshaw](https://discourse.elm-lang.org/u/Douglas_H_Bradshaw)\
**Post date:** [January 20, 2020, 1:42pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/15 "2020-01-20T13:42:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vitaminssnoopy](https://avatars.discourse-cdn.com/v4/letter/v/d78d45/32.png) [@vitaminssnoopy](https://discourse.elm-lang.org/u/vitaminssnoopy)\
**Post date:** [January 23, 2020, 12:03am UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/16 "2020-01-23T00:03:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RyanNHG](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ryannhg/32/5162_2.png) [@RyanNHG](https://discourse.elm-lang.org/u/RyanNHG)\
**Post date:** [January 23, 2020, 5:59pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/17 "2020-01-23T17:59:59Z")

</div>

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

I’m glad you enjoy using elm-spa!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 2, 2020, 6:00pm UTC](https://discourse.elm-lang.org/t/elm-spa-single-page-apps-made-easy/4950/18 "2020-02-02T18:00:02Z")

</div>

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