# Serving a simple static html file from inside elm-spa

**URL:** <https://discourse.elm-lang.org/t/serving-a-simple-static-html-file-from-inside-elm-spa/7950>\
**Category:** Learn\
**Created:** [November 29, 2021, 9:50pm UTC](https://discourse.elm-lang.org/t/serving-a-simple-static-html-file-from-inside-elm-spa/7950 "2021-11-29T21:50:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![madsh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/madsh/32/4376_2.png) [@madsh](https://discourse.elm-lang.org/u/madsh)\
**Post date:** [November 29, 2021, 9:50pm UTC](https://discourse.elm-lang.org/t/serving-a-simple-static-html-file-from-inside-elm-spa/7950/1 "2021-11-29T21:50:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DullBananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dullbananas/32/3709_2.png) [@DullBananas](https://discourse.elm-lang.org/u/DullBananas)\
**Post date:** [November 30, 2021, 12:14am UTC](https://discourse.elm-lang.org/t/serving-a-simple-static-html-file-from-inside-elm-spa/7950/2 "2021-11-30T00:14:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RyanNHG](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ryannhg/32/5162_2.png) [@RyanNHG](https://discourse.elm-lang.org/u/RyanNHG)\
**Post date:** [November 30, 2021, 3:13am UTC](https://discourse.elm-lang.org/t/serving-a-simple-static-html-file-from-inside-elm-spa/7950/3 "2021-11-30T03:13:51Z")

</div>

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](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:

> <https://github.com/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:

```auto
[[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

---

<div class="post-metadata">

**Author:** ![madsh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/madsh/32/4376_2.png) [@madsh](https://discourse.elm-lang.org/u/madsh)\
**Post date:** [November 30, 2021, 7:18am UTC](https://discourse.elm-lang.org/t/serving-a-simple-static-html-file-from-inside-elm-spa/7950/4 "2021-11-30T07:18:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 10, 2021, 7:18am UTC](https://discourse.elm-lang.org/t/serving-a-simple-static-html-file-from-inside-elm-spa/7950/5 "2021-12-10T07:18:53Z")

</div>

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