This is my first endeavour into elm-lang and I am having a blast. Strongly typed languages make so much better tooling…
elm-spa.dev has been a really good for my first app.
However, I am trying to ‘co-host’ a simple html file next to the index.html entry point. I do this because i think I need more control of the css and scripts loaded on the page. You might even call it a spa-in-a-spa…
The inner-spa redirects fine back to the elm world via a simpe windows.location.
But going the other way using Html.a [ Attribute.href “innerspa.html” ][…] does not do what I expect. My browser shows a ‘page not found’ that I recognize as a elm-spa default. But if I simply reload the browser using F5, I get straight into innerspa.html…
Why is this happing? and is there a better way…?
I would rather not have to host innerspa.html at a different (sub-)domain, but that would be absolutely possible.
You might need additional logic in the update function, so that when you click a link to “innerspa.html”, it runs Browser.Navigation.load instead of Browser.Navigation.pushUrl because it usually runs pushUrl when the URL is in the same domain. I don’t know if elm-spa allows that.
Maybe it also works if you change the href to include the full URL including the domain name
How you serve static pages in elm-spa will depend on what hosting looks like for you.
For single page apps, there is a requirement to redirect all requests to the single index.html file. For example, when I was making https://elm-spa.dev, I chose to host the app with Netlify.
Here’s what my netlify.toml file looked like to handle single-page redirects:
The last [[redirects]] section takes all page requests and points them to index.html (which serves the elm-spa application). This is what makes URL requests to /posts or /about-me always hit the elm-spa application.
If you were using Netlify, and wanted requests to /innerspa/* to go to a different entrypoint- you would specify a section like this before the final index.html redirect:
[[redirects]]
from = "/innerspa/*"
to = "/innerspa.html"
status = 200
As long as your innerspa.html file is alongside index.html in the public folder, you should be all set.
If you are using a different server than Netlify, you’ll need to look into the docs for that hosting solution. The good news is this is a general frontend web app problem, so what you learn there will apply to elm-spa and any other frontend project you use.
Being a lazy programmer, I went with the shorter solution.
I tried to go to ‘innerspa.html’ using a Browser.Navigation.load "innerspa.html" in the update section and it worked like a charm.
Not too bad for a bunch of blunt fruits
And I guess I learned a bit about http routing on Netlify, if I ever wanted to access the innerspa.html directly from a URL and not coming from my “outerspa”.
