Hi folks, I was recently building an SPA elm application making for quizzes like google forms.
the app has 3 pages:
front page ( / )
editor page ( /editor )
take page ( /take )
The front page has two internal links for the two other pages and navigation works as expected.
But when trying go to specific page directly from browser address bar like “http://localhost:3000/editor” the browser doesn’t load the correct page, instead it request the server with that URL and that return 404 error.
That problem I observe with both elm reactor or with any other local file server.
I have made a solution to this by writing a custom dev server in python that loads the page at index route “/” no matter what is the URL and that load the elm app and let elm take over navigation and get the correct behavior.
The question is:
how to manage this problem when you deploy a static client side app where you don’t own the server and can’t configure it.
Hi!
The typical way of configuring a server for a SPA is to redirect everything to / so that the front-end code loaded on the index.html page handles navigation.
If, like you said, there is no way for you to do that, you could also use hash-based navigation. Folks talk about it in that issue, but I cannot give more pointers than that: Support Hash-Routing (again) · Issue #24 · elm/url · GitHub
For development I’d highly recommend Home | elm-watch for basic development. It’s really fantastic. If you want to go further, vite is really nice and there’s a couple great Elm plugins for it.
(Expanding on @wolfadex’ answer: I recommend using the beta version of elm-watch (npm install elm-watch@beta), because it comes with a built-in server that handles the SPA navigations. Note that the elm-watch server is only for development, not production use.)
If I’m understanding right, your problem is that the server you’re working with can only serve files as they are uploaded and can’t be configured beyond that. If that’s correct, for your very particular case, you should be able to make it work by uploading the same html file three times at the three urls. This won’t work if your SPA has IDs in the urls, but that doesn’t sound like it’s the case for you.
@Noor I’m curious to find out what service you’re using for your servers such that you can’t configure anything about it?
I can tell you what I do when deploying to Netlify. Netlify allows you to use a _redirects file (learn more) to tell the server that all requests should be redirected to /. Here’s an example from Super Rentals.
With regards to your custom dev server, you didn’t need to write one yourself. Though I’m sure it was a nice learning opportunity. I’ve personally started using Caddy in my apps. And, it’s easy to tell it to redirect all requests to / as well. Here’s an example from the same app.
.