Serving static content within a single-page web app

Learn
1

I’m new to Elm and I’m using the language to build a little website. I’ve got the site’s framework built out using Browser.applicationand Url to route to the different sections of the site. The actual content is supposed to render from a couple Markdown and JSON files.

This is where I’m having an issue. I’m trying to access these files from Elm via HTTP requests, but since they’re served from the same place as the main site, my main page is catching the requests and giving back my “this page does not exist” stuff instead of the actual files.

Is there some way to setup a single-page application so that it defaults to serving normal, static content for some URLs, while doing all the good, single-page stuff for every other URL? I can find a thread in this forum discussing a solution for the same issue with Elm-Spa, but I’m wondering if there’s a way to address this with a basic Browser.application as well?

[edit: grammar]

2

Which HTTP server are you using?

3

I’m just serving locally right now with Parcel. I’ll be deploying on GitHub Pages, though.

4

Parcel can serve static files, can’t it?

5

If you mean that you are writing an elm app with Browser.application and in that elm app you are a [ href ] linking to a url that’s actually a static file on the same server but getting this page does not exist…

I suspect it could be that your Browser.application is considering that link to be Internal and going down the code path to pushUrl which isn’t a real browser navigation; just a routing within your elm app, thus result in the problem you describe.

Try to detect for your path and get to return Nav.load which would let the browser do a real page load and get to your file.

If my guess is correct

6

Yeah I think this is more or less where my issue is, except the static content I’m serving is not static pages necessarily, but rather content (primarily JSON and Markdown files) I’m parsing and rendering within other pages on my site.

In other words, when someone tries to navigate to /blog/cats, that is Internal and we should be doing a pushUrl, BUT this page should also be rendering content from /content/blog-posts/cats.md. I’m trying to load the text of this markdown file to handle it in my Elm script, and I think I need to do that with Http. Again, slightly different issue from what you’re describing, but I think the solution might be the same??

7

It looks like both @lydell and @choonkeat found my issues :slight_smile: I threw in some static HTML pages to test a couple things and fixed my routing, and I can access the static pages in addition to my main site. I’m still having issues accessing my Markdown/JSON files, and I think that’s a config issue with how I have Parcel configured, so I’m gonna look into addressing that now. Thank you both

EDIT: In addition to fixing the routing by returning Nav.load on the urls of the static content, the issue with accessing the Markdown/JSON files specifically was related to how I had my Parcel build scripts configured. This StackOverflow thread addresses the configuration issues I had.

3 Likes
8

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