Whats the best way to test routing locally?

Learn
1

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:

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)
2

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).

1 Like
3

Obviously you can use end-to-end testing frameworks like Playwright but maybe that’s overkill.

4

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.

1 Like
5

For running my application locally I use Parcel 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. I’ve heard good things about ViteJS and notice that there is an elm plugin for it too.

6

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

7

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