Serving a simple static html file from inside elm-spa

Learn
3

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:

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. :sunglasses:

Hope this context helps!
Ryan

1 Like