# Whats the best way to test routing locally?

**URL:** <https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463>\
**Category:** Learn\
**Created:** [November 16, 2023, 10:56pm UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463 "2023-11-16T22:56:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cma256](https://avatars.discourse-cdn.com/v4/letter/c/f04885/32.png) [@cma256](https://discourse.elm-lang.org/u/cma256)\
**Post date:** [November 16, 2023, 10:56pm UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463/1 "2023-11-16T22:56:17Z")

</div>

I’m using Browser.application and elm reactor currently. When loading the app it visits “/src/Main.elm” rather than the root url (obviously). Clicking URLs within the application works fine but typing urls into the address bar is challenging since they do not correlate to a filepath within the folder structure.

Whats the best way to test applications with routes? Tangentially how would it work in a production environment?

This is my routing module:

```auto
module Route exposing (..)

import Url
import Url.Parser exposing ((</>), Parser, map, oneOf, parse, s, string)

type Route
    = Home
    | User String
    | NotFound String

routeParser : Parser (Route -> a) a
routeParser =
    oneOf
        [ map Home (s "")
        , map User (s "users" </> string)
        ]

toRoute : Url.Url -> Route
toRoute url =
    Maybe.withDefault (NotFound url.path) (parse routeParser url)

```

---

<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:** [November 17, 2023, 7:01am UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463/2 "2023-11-17T07:01:24Z")

</div>

I find it a bit odd that `elm reactor` doesn’t really support `Browser.application`. Well, it allows “booting” such a program, but as you say the URLs don’t really match up, and refreshing the page after having changed the URL is broken.

In a production environment, a common setup is to have a server that tries to find the requested file and serve that, but if it isn’t found falls back to serving your main HTML file.

- For requests like `/favicon.ico`, `/assets/js/main.js` and `/styles.css` – serve those files.
- For requests like `/`, `/about` and `/blog/2023/cooking-ideas`, serve your main HTML file.

Your “main HTML” file is a very small HTML file that basically only loads your compiled JS (the Elm code compiled as JS) and starts the Elm app (`window.Elm.Main.init(...)`) – this is what `elm reactor` does for you, but you’ll need to do yourself. The Elm `Browser.application` app will then be given whatever URL you are on so that it can render the desired page.

During development, you need a local server that can do this. I don’t have a quick suggestion on what to use right now (but I can hint at that [a future version of elm-watch might have such a server](https://lydell.github.io/elm-watch/server/)).

---

<div class="post-metadata">

**Author:** ![Laurent](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/laurent/32/2051_2.png) [@Laurent](https://discourse.elm-lang.org/u/Laurent)\
**Post date:** [November 17, 2023, 7:46am UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463/3 "2023-11-17T07:46:57Z")

</div>

Obviously you can use end-to-end testing frameworks like [Playwright](https://playwright.dev/) but maybe that’s overkill.

---

<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:** [November 17, 2023, 8:00am UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463/4 "2023-11-17T08:00:01Z")

</div>

It sounds like me and @Laurent interpreted your question in different ways.

- I interpreted it as: “How do I run my application with routing locally, to manually test it by clicking around?”
- Laurent seems to have interpreted it as: “How do I write automated tests for routing?”

In case you’re confused by the wildly different answers.

---

<div class="post-metadata">

**Author:** ![sparksp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sparksp/32/2789_2.png) [@sparksp](https://discourse.elm-lang.org/u/sparksp)\
**Post date:** [November 17, 2023, 9:23am UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463/5 "2023-11-17T09:23:45Z")

</div>

For running my application locally I use [Parcel](https://parceljs.org/) which can also build the site for deploying. Other JS build tools may have development servers too, for example you can add [the DevServer to WebPack](https://webpack.js.org/configuration/dev-server/). I’ve heard good things about [ViteJS](https://vitejs.dev/) and notice that there is an [elm plugin](https://github.com/hmsk/vite-plugin-elm/) for it too.

---

<div class="post-metadata">

**Author:** ![cma256](https://avatars.discourse-cdn.com/v4/letter/c/f04885/32.png) [@cma256](https://discourse.elm-lang.org/u/cma256)\
**Post date:** [November 17, 2023, 2:01pm UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463/6 "2023-11-17T14:01:07Z")

</div>

Thanks @lydell . That’s great context. Regarding elm-watch and @sparksp suggestion to use Parcel. I think those could be great solutions. I’ll explore and experiment. Thanks everyone 😃

---

<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:** [November 27, 2023, 2:01pm UTC](https://discourse.elm-lang.org/t/whats-the-best-way-to-test-routing-locally/9463/7 "2023-11-27T14:01:34Z")

</div>

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