Elm basic SPA - How to handle refresh and manual enter of url

Hi everyone,
I am very new to Elm so please bear with me if my question is very basic. I’m toying around creating a very basic Elm SPA and use NPM http-server to host it. It is running fine and I can click on my two pages “Home” and “About” page. However, if I refresh the page, for example on “/about” page, I got 404 error. Also the same thing if I manually enter the url. I’d like my SPA to handle these cases. I’ve put my project at https://github.com/mvperez/elm-spa-basic so you can review the code and suggest what I can or need to do.

You need to always serve index.html from your http-server, whatever the route.

A hack with the particular node server you are using is the --proxy option:

--proxy http://localhost:8080?

or whatever port you use.

See https://github.com/http-party/http-server/issues/519.

If it’s just during development, I would rather use elm-live with the --pushstate option to get live reloading:

elm-live src/Main.elm -u
1 Like

Hi @dmy

I have tried this http-server -p 5000 --proxy http://localhost:5000? but still didn’t work on refresh or manual enter.

I can use elm-live as you suggested but I’d like to simulate first serving my index.html with my compiled main.js.

From your logs, it seems that you are not connecting locally, you run the SPA on a server and connect from another client, right?

If so, localhost in the proxy option cannot work, as it will redirect clients to http://localhost:5000/index.html on 404s (so clients will try to connect to themselves).

You have to use the IP of the server (or its DNS name if any) instead, basically the same one as the one you use to connect to it from the client initially.

I run the server locally and I’m accessing locally. Here’s another screenshot.

Also, I think my routing is not perfect. I click the “home” but it didn’t match my route. My source code is updated.

Well, it works, you don’t have 404s anymore. This is a different issue.

Your routeParser expect the / URL for home, but your link points to /home. Maybe what you want is a [ href "/" ] [ text "home" ] ] for your home link.

I changed the href now to “/”

Still, the problem of refresh (reload) and manual enter still there.

This is a a Windows specific issue of http-server:

Downgrading to http-server 0.9.0 should fix it.

Alright! Gotcha… Thank you so much! Now I can move on from here :slight_smile:


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