Serving a simple static html file from inside elm-spa

[madsh]

Hi,

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.

[DullBananas]

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

[RyanNHG]

Hey @madsh,

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:

ryannhg/elm-spa/blob/main/docs/netlify.toml

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.

Hope this context helps!
Ryan

[madsh]

Thanks to @RyanNHG and @DullBananas for such a swift answer!

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